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

Re: mouseenter, mouseleave

From: Garrett Smith <dhtmlkitchen@gmail.com>
Date: Thu, 30 Jul 2009 22:30:32 -0700
Message-ID: <c9e12660907302230i1637c2bdp1f2ebb50eba4fb32@mail.gmail.com>
To: Jonas Sicking <jonas@sicking.cc>
Cc: Jacob Rossi <t-jacobr@microsoft.com>, "www-dom@w3.org" <www-dom@w3.org>, Travis Leithead <travil@microsoft.com>
On Thu, Jul 30, 2009 at 9:33 PM, Jonas Sicking<jonas@sicking.cc> wrote:
> On Thu, Jul 30, 2009 at 3:26 PM, Jacob Rossi<t-jacobr@microsoft.com> wrote:
>> 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.
>
> Why do we need mouseenter/mouseleave at all? It seems to me that
> mouseover/mouseout is more widely deployed in UAs, and solves the same
> use cases.
>

mouseenter and mouseleave are handy because they don't bubble.

<ul class="menu">
  <li>item 1</li>
  <li>item 2</li>
</ul>

when the menu has mouseover and mouseout events, they fire on the LI.

menu.onmouseout = hideMenu;

If the user moves the cursor from item 1 to item 2, a mouseout event fires.

That means that the hideMenu function must check the relatedTarget (or
toElement) to see if menu does not contain the related target.

Mouseleave simplifies the code because hideMenu won't have to check.

> / Jonas
>
>
Garrett
Received on Friday, 31 July 2009 05:31:14 GMT

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