Wednesday, July 23, 2008

Browser Compatible Mouse Events

As I continue on the path of converting an IE specific web site into a browser-agnostic web site I found that not all mouse events are the same. What I mean is, Internet Explorer 5.5 introduced the onmouseenter and onmouseleave event handlers. This is after everybody and their brother already support the onmouseover and onmouseout terminology which do exactly the same thing. By the way, don't get me wrong, I actually think the IE naming convention makes more sense. This is pretty much one of the most uninteresting and easily fixable browser issues I've come upon so far. The problem was finding the issue. When you think you know something that is so obvious like:

<div onmouseenter="dosomething();">Some text</div>

You continue to bang your head against the wall when it works in Internet Explorer but fails in Firefox.

So when you're fixing up your web site to make it fully cross-browser compatible. Make sure to use the classic onmouseover and onmouseout events.

2 comments:

Anonymous said...

Diff be. move/enter:
The onmouseenter event does not bubble. In other words, the onmouseenter event does not fire when the user moves the mouse pointer over elements contained by the object, whereas onmouseover does fire.

So this can slow down the behavior if your always changing the class or style on the Object!

Mike Maddox said...

You are right! After I started converting over my project, I found this subtle difference that makes all the difference. Though I was able to change most of it without a hitch this was a real gotcha. The Javascript Bible doesn't mention any of this!!