Friday, November 28th, 2008
Mouse entering and leaving versus over and out
Category: HTML
, JavaScript
Greg Reimer is doing really interesting work with reglib and he now has a neutral post on events and how he favours the pattern of mouse enter / leave to mouse over / out.
He shows an example using the pyramid illustrations (as above) and then ends with:
The title of this post is a bit misleading. The mouseenter/leave events are never used. It’s all still accomplished via mouseover/out, but there’s enough information available in the handling element, event.target and event.relatedTarget elements–and their positions relative to each other–to know whether to execute the handler. Since the actual mouseenter/leave events don’t bubble, and in any case are IE-only, reglib wants nothing to do with them. This code is checked in to the trunk, and with a little more testing will be released as reglib version 1.0.5.
One thing also, I’d be curious to know if anybody knows of a reason this would be *undesirable* behavior.
What do you think?
When reglib was first posted here I thought about changing it to enter/leave. After implementing my own solution to it(very similar to what he has done here), I realized that it didn’t make sense to do it either one way or the other. It came about when I was trying to delegate my tooltips and had an element with a tooltip inside another element with a tooltip. Using enter/leave I could not show the outer element’s tooltip when I move out of the inner element. I added a reg.enter function so I could choose which way I wanted the events to be handled.
Nothing new here besides code bloat. jquery has had support for these events for a long time. It has the best mouseenter/leave implementation of all the javascript frameworks out there. I haven’t been able to get any of the other implementations to pass basic functional tests. Every framework should add support for mouseenter/leave and learn from jquery while they are at it.
Mootools has mouseenter/leave for a long long time.
As has dojo, as of 1.0 (now on 1.2)
When I released the previous version of Ra-Ajax I wrote up how to do this “by hand” in JavaScript (Ra-Ajax supports this “out of the box”)…
.
http://ra-ajax.org/ra-ajax-0-8-5-released-rock-steady.blog
.
…for those interested…