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, 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?

Posted by Dion Almaer at 1:26 pm

2.8 rating from 27 votes


Comments feed TrackBack URI

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.

Comment by MattCoz — November 28, 2008

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.

Comment by lovejs — November 28, 2008

Mootools has mouseenter/leave for a long long time.

Comment by steida — November 29, 2008

As has dojo, as of 1.0 (now on 1.2)

Comment by sfoster — November 30, 2008

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”)…
…for those interested…

Comment by ThomasHansen — December 1, 2008

Leave a comment

You must be logged in to post a comment.