Goodbye mouseover, hello mouseenter

I decided that mouseover/out is never the behavior I want, whereas mouseenter/leave is always the behavior I want. Practically always. So I've changed over reglib's reg.hover() to behave like mouseenter/leave.

For Example

Say you have this HTML structure:

<div>
  <p>
    <span>
      <a>
        mouse over me
      </a>
    </span>
  </p>
</div>

Which I tend to visualize as a ziggurat-like object:

a nested hierarchy of elements

...and then you have this event handler:

// note, the think() function is purely fanciful

reg.hover('div',function(e){
    think(e.type, e.target);
},function(e){
    think(e.type, e.target);
});

Up until now, reglib behaved like a typical mouseover/out event handler, which in a nested element/bubbling situation isn't what you really want. The mouse movement is represented by the little arrow:

mouse enters div, triggers mouseover mouse enters nested p, triggers mouseout, mouseover mouse leaves nested p, triggers mouseout, mouseover mouse leaves div, triggers mouseout

So anyways, as I said, this is a bit wonky and unnecessary. Therefore the next version of reglib will (if all goes to plan) behave thusly:

mouse enters div, triggers mouseover mouse enters nested p, nothing happens mouse leaves nested p, nothing happens mouse leaves div, triggers mouseout

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.


For more info: see all reglib posts, grab the reglib feed, reglib on google code

Comments:

This is almost always the behavior i want. I can't think of a recent project where i wanted the events to repeatedly fire/bubble while mousing over child elements.

Posted by ben on November 28, 2008 at 05:07 AM MST #

I think this tends to be the behavior one wants. For example, the child HTMLelements of a custom ui control typically just add noise to the event processing.

If one wants a mouse event for (in your example) both div and p, is the proposed course of action to apply two handlers? I'm not really sure how I would expect it to work, but a clean way to do some event delegation would be fancy.

Something like this, so you can dictate multiple behaviors with only one handler:

[code]
reg.hover(
{ 'div': function(e),'p': function2(e)},
{'div': function(e), 'p': function2(e)}
);
[/code]

Posted by jeff on December 01, 2008 at 02:41 AM MST #

@jeff - If I understand correctly...

reg.hover(
{'div': funcOver, 'p': funcOver2},
{'div': funcOut, 'p': funcOut2}
);

would be identical to...

reg.hover('div', funcOver, funcOut);
reg.hover('p', funcOver2, funcOut2);

All other things being equal I'm inclined to stick with the second syntax. The handling would happen regardless of nesting.

Posted by greg on December 01, 2008 at 04:37 AM MST #

Hi, Greg Reimer

Thank u for your article. I met this kind of problem long time ago.
How can I solve it, can you tell me some solutions, thanks a lot.

Stanley

Posted by Stanley on December 29, 2008 at 12:16 PM MST #

Post a Comment:
Comments are closed for this entry.
About

My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today