Opened 11 years ago

Closed 8 years ago

#7504 closed defect (duplicate)

[Event System] OnMouseEnter and MouseLeave Defect

Reported by: ole Owned by: sjmiles
Priority: high Milestone: future
Component: Events Version: 1.0
Keywords: Cc: ole, Kris Zyp
Blocked By: Blocking:

Description

In the attached demo, there's a div with ID 'box1', that contains another div with ID 'box2'.

[EXPECTED BEHAVIOR - WORKS WITH SLOW MOUSE MOVEMENT]

When moving the mouse slowly over box1 the background color of box1 is set to green and 'entering' is printed to the console. When leaving slowly it turns back to gray again and 'leaving' is printed to the console.

Another thing to note is that it depends on the size of box2. The smaller box 2 is, relative to box 1, the more time the browser/dojo has to realize that the event occurred.

[FUNKY BEHAVIOR]

If the mouse is moved slowly over box one and then quickly out of the box1-box2 area, the leave event never occurs and the background color of box1 stays green.

Also depending on the mouse movement the color of box2 is changed to gray on the mouse leave event instead of the color of box1, which remains green.

There's another variation of this. Instead of the background of box1 turning green the background of box2 will turn green on the mouse enter event.

Summary

ISSUE 1:

The target of the event is not what one would expect it to be. We expect the event.target to be box 1 always, but sometimes it's box2.

ISSUE 2:

Leave events are not detected depending on mouse cursor velocity.

SOLUTION

Off the top of my head a solution for ISSUE2 is to first fix ISSUE1. Then track all nodes that have received a mouse enter event, but not a mouse leave event, in a LIST_OF_NODES. Whenever a mouse over event occurs on MOUSE_OVER_TARGET, check the LIST_OF_NODES. If the size is > 0, check to see whether each node in the LIST_OF_NODES should have received triggered a mouse leave event. If the x coordinate and y coordinate of the MOUSE_OVER_TARGET is outside of the area occupied by the node, then deliver a mouseleave event to the listeners that should have received one.

Attachments (1)

DojoOnMouseEnterAndLeaveBoxTest.html (2.3 KB) - added by ole 11 years ago.

Download all attachments as: .zip

Change History (10)

Changed 11 years ago by ole

comment:1 Changed 11 years ago by ole

Note that this report is possibly a duplicate of this one: http://bugs.dojotoolkit.org/ticket/6362

The experiments were different though. This report is shorter and easier to understand, so if marking one as a duplicate, I would keep this one open and close the other. I'm not 100% sure they are duplicates though.

comment:2 Changed 11 years ago by ole

Shoot forgot to add myself to the CC list. Could someone please add me? The field is disabled once the ticket gets submitted. Would be great if it would automatically add me, since I was logged in at the time of ticket creation.

comment:3 Changed 11 years ago by dante

Cc: ole added

@ole - you should add your email address to the email field in 'settings' link above. it will cc you on any tickets you create. or should.

comment:4 Changed 11 years ago by ole

Thanks - Incidentally I added a FF bugzilla entry here, just in case there's in issue with onmouseout in FF.

comment:6 Changed 11 years ago by bill

Milestone: tbdfuture

I've seen dropped events on FF but not IE or Safari. I suspect that's the issue.

I don't see how we could fix it though; should probably mark this for future, unless Scott has a fix.

comment:7 Changed 11 years ago by ole

One tricky thing about the solution I suggested is what happens when the client javascript code starts adding new nodes to the dom. Would it be possible for dojo to "sense" this and fire off an event with a reference to the added node? Short of that the script developer would have to add it. Anyone think the FF dudes will add support for OnMouseEnter? and OnMouseLeave? if I get them a six pack?

comment:8 Changed 11 years ago by ole

I just noticed this ticket: http://trac.dojotoolkit.org/ticket/7216

It says this: Firefox 2 has a onmouseover/out bug where it spawns spurious events that have invalid relatedTarget values attached to the event object.

I wonder if that could be part of what's causing ISSUE1? I'll try the test again once 1.2 is released.

comment:9 Changed 8 years ago by bill

Cc: Kris Zyp added
Resolution: duplicate
Status: newclosed

Duplicate of #6362.
As I wrote in #6362, you need to use "this" to get a pointer to the target node, rather than evt.target.

Note: See TracTickets for help on using tickets.