W3C home > Mailing lists > Public > www-dom@w3.org > July to September 2009

mouseenter, mouseleave

From: Jacob Rossi <t-jacobr@microsoft.com>
Date: Thu, 30 Jul 2009 22:26:00 +0000
To: "www-dom@w3.org" <www-dom@w3.org>
CC: Travis Leithead <travil@microsoft.com>
Message-ID: <1FBDB72C331CBA4D815A8B85E1CBB65C04EBCC@TK5EX14MBXC111.redmond.corp.microsoft.com>
If the idea is to spec mouseenter/mouseleave similar to IE's behavior, then the description currently in the spec could use some work. Here's the key differences between mousenter/mouseleave and mouseover/mouseout:
        * mouseenter/mouseleave do not bubble
        * The mouse/pointer is considered over the element while it is over the element or any of its children. That is to say that mouseleave does not fire on a parent element when you move onto a child element (like mouseout does).

I have a demo page if you want to mess around with it (www.jacobrossi.com/mouse.html). It fires mouseover/mouseout in all browsers and mouseenter/mouseleave/mouseout/mouseover in IE. It also uses :hover to change the background for comparison.

Current description:
mouseenter
 "A pointing device is moved onto an element. This event type is similar to mouseover, but for mouseenter, the propagation path must end at the event target element, and must not include the target element's child nodes as event targets. Note: This is the event type equivalent of the CSS :hover pseudo-class [CSS2]. This matches the mouseleave event type in its propagation path behavior."

mouseleave
"A pointing device is moved away from an element. This event type is similar to mouseout, but for mouseleave, the propagation path must end at the event target element, and must not include the target element's child nodes as event targets. Note: This matches the mouseenter event type in its propagation path behavior."


My suggestion:
mouseenter
"A pointing device is moved over the boundaries of an element _or_ one of its children. This event type is similar to mouseover, but does not bubble.  Note: This is the event type equivalent of the CSS :hover pseudo-class [CSS2]."

mouseleave
"A pointing device is moved outside of the boundaries of an element _and_ its children.  This event type differs from mouseout in that it does not fire until the pointing device has left the boundaries of the element and all of its children; whereas mouseout fires on an element when the pointing device moves over one of its children.


They're not perfect, but something like that is probably more accurate.

--Jacob
Received on Thursday, 30 July 2009 22:27:00 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 22 June 2012 06:14:03 GMT