Skip to main content

Bug Tracker

Side navigation

#9069 closed bug (fixed)

Opened May 03, 2011 05:48PM UTC

Closed September 22, 2011 12:21AM UTC

Last modified March 17, 2012 08:42PM UTC

when hover over a child of an element, mouseleave fires when using live or delegate

Reported by: Anders Bondehagen <anders@bondehagen.com> Owned by: dmethvin
Priority: blocker Milestone: 1.7
Component: event Version: 1.6
Keywords: live Cc:
Blocked by: Blocking:
Description

This works as expected in 1.5 and also in 1.6 if using bind instead.

steps:

1. bind a mouseleave event to a div using live or delegate

2. hover over a child element of the div, the mouseleave event should not trigger, but it does!

test http://jsfiddle.net/NNLkN/10/

browsers tested: chrome 11 and firefox 4.0.1 on windows 7

Attachments (0)
Change History (25)

Changed May 03, 2011 08:00PM UTC by gnarf comment:1

component: unfiledevent
keywords: → live
status: newopen

Changed May 03, 2011 08:16PM UTC by dmethvin comment:2

owner: → dmethvin
priority: undecidedblocker
status: openassigned

Gaaah! I'll take a look at this one, most likely due to the recent jiggling of withinElement().

Changed May 04, 2011 01:34PM UTC by Anders Bondehagen <anders@bondehagen.com> comment:3

The problem seems to have been introduced in the following commit https://github.com/brianlovesdata/jquery/commit/5f816ffca67e7fdcedcff580d19c4a7d7994c48a

Changed May 06, 2011 03:46PM UTC by timmywil comment:4

#9143 is a duplicate of this ticket.

Changed May 06, 2011 10:21PM UTC by anonymous comment:5

The behavior I'm seeing is that, when I use $.live to bind "mouseenter mouseleave", the "mouseover" and "mouseout" events are reported in event.type instead of "mouseenter" or "mouseleave".

Using $.bind, the correct event types are reported.

Example: http://jsfiddle.net/neonsilk/CAZkw/

Changed May 09, 2011 06:31AM UTC by T.J. Crowder comment:6

Ran into this today as well. Just because I already had it, here's another example if it's useful: using live vs. using bind (via hover).

Changed May 09, 2011 02:01PM UTC by timmywil comment:7

milestone: 1.next1.6.1

Changed May 10, 2011 02:32PM UTC by rwaldron comment:8

#9211 is a duplicate of this ticket.

Changed May 10, 2011 03:50PM UTC by John Resig comment:9

resolution: → fixed
status: assignedclosed

Make sure that mouseenter/mouseleave fire on the correct element when doing delegation. Fixes #9069.

Changeset: 419b5e5e2a0d376e71c3f37bf9a3d96f3b4a67f2

Changed June 01, 2011 04:08PM UTC by Bill comment:10

I believe this ticket should remain open. I am seeing this same bug using 1.6.1 when using $('#el').live("mouseleave", function(){});

Event triggers when hovering over a child div in an AJAX generated div. Bind has no response with AJAX DOM elements, and as such - does not react in this instance.

Changed June 01, 2011 04:15PM UTC by rwaldron comment:11

@Bill Can you test with this: http://code.jquery.com/jquery-git.js

Changed June 01, 2011 04:23PM UTC by Bill comment:12

Replying to [comment:10 Bill]:

I believe this ticket should remain open. I am seeing this same bug using 1.6.1 when using $('#el').live("mouseleave", function(){}); Event triggers when hovering over a child div in an AJAX generated div. Bind has no response with AJAX DOM elements, and as such - does not react in this instance.

Testing with JQ 1.5.1 provides successful (expected) action using identical code. Recommend re-opening this ticket. I will have to revert back to 1.5x for the live site as this controls my auto-suggest search box on a live site

Changed June 01, 2011 04:25PM UTC by anonymous comment:13

Replying to [comment:11 rwaldron]:

@Bill Can you test with this: http://code.jquery.com/jquery-git.js
  • No change. See my reply i can pass the website URL over email for you to see this action

Changed June 01, 2011 04:29PM UTC by rwaldron comment:14

Yes, please provide your example case

Changed June 01, 2011 04:36PM UTC by Bill comment:15

Replying to [comment:14 rwaldron]:

Yes, please provide your example case

Rwaldron, the sample site is http://www.wiki-pet.com/ - but since this is a live site, i have already reverted back to 1.5.1 The area of interest is the main search. You will see the correct behavior now auto-suggest box code is as follows:

function getSearchCB(data){

var newHTML = '';

var results = data.results;

var total = data.total;

var exc_time = data.exc_time;

var msg = data.msg;

var err = data.err;

var stats_div = '<div class="aj_search_stats"><p>'+total+' results ('+exc_time+' sec)</p></div>';

if(err==0&&total>0){

$.each(results,function(object, data_set){

var name = data_set.name;

var r_link = data_set.r_link;

var type_name = data_set.type_name;

var sec_link = data_set.sec_link;

var accuracy = data_set.accuracy;

newHTML += '<div class="aj_search_res">';

newHTML += '<h3 class="sj_big_link"><a href="'+r_link+'">'+name+'</a> <span class="sr_helper_txt"> - ';

newHTML += type_name+' '+accuracy+'%</span></h3></div>'+stats_div;

});

}

else{ newHTML = '<div class="aj_search_res"><div class="aj_sr_inner">'+msg+'</div></div>'; }

if($('#aj_search_results').length>0){ $('.aj_sr_inner').html(newHTML); }// empty the old results

else{ $('.gs_wrapper').append('<div id="aj_search_results"><div class="aj_sr_inner">'+newHTML+'</div></div>'); }

}

Browser: Firefox 3.6x

Changed June 01, 2011 05:33PM UTC by rwaldron comment:16

Sorry, but I'm not sure how that could ever possibly work with those syntax errors.

Also, I can't create a reproduction from this - there is nothing here that illustrates how the handlers themselves were added. Based on your description I'd recommend that you re-evaluate your approach. Using live to attach handlers this way was superseded by delegate() which allows one handler to be added to a parent container that reacts to events of it's children.

Changed June 01, 2011 06:15PM UTC by Bill comment:17

Replying to [comment:16 rwaldron]:

Sorry, but I'm not sure how that could ever possibly work with those syntax errors. Also, I can't create a reproduction from this - there is nothing here that illustrates how the handlers themselves were added. Based on your description I'd recommend that you re-evaluate your approach. Using live to attach handlers this way was superseded by delegate() which allows one handler to be added to a parent container that reacts to events of it's children.

The code works flawlessly in JQ 1.5.1 and not at all in 1.6.1 - - i noticed that the comments i had in my own code were "slash stripped" on the previous comment, which is where you are seeing syntax errors. I just copied it over without re-formatting at all.

Changed June 01, 2011 06:38PM UTC by Bill comment:18

Replying to [comment:17 Bill]:

Replying to [comment:16 rwaldron]: > Sorry, but I'm not sure how that could ever possibly work with those syntax errors. > > Also, I can't create a reproduction from this - there is nothing here that illustrates how the handlers themselves were added. Based on your description I'd recommend that you re-evaluate your approach. Using live to attach handlers this way was superseded by delegate() which allows one handler to be added to a parent container that reacts to events of it's children. The code works flawlessly in JQ 1.5.1 and not at all in 1.6.1 - - i noticed that the comments i had in my own code were "slash stripped" on the previous comment, which is where you are seeing syntax errors. I just copied it over without re-formatting at all.

Suggestion to use delegate() works across safari 5, FF 3.6, IE8, and Chrome - thats all i've tested as of now. Good suggestion. A suggestion would be to update the docs (if they aren't already updated) to transfer the old-school live() calls to delegate() all together when using JQ 1.6+ to avoid this confusion with other developers

Thanks for your time and diligence on this matter.

Changed June 01, 2011 07:47PM UTC by rwaldron comment:19

I can't tell you how stoked I am that you had success with that (I've had a frustrating afternoon of my own :D )

Changed September 02, 2011 03:44PM UTC by rwaldron comment:20

#10192 is a duplicate of this ticket.

Changed September 12, 2011 03:46PM UTC by tigbro comment:21

(Copy from #10192):

When using jquery (edge) the event.type reports "mouseenter" in a "mouseover" event listener, when the mouse is moved over the node. This only occurs when the element also has a mouseenter event listener attached.

Same is true for the combination "mouseleave" / "mouseout"

Here is a fiddle for reproduction:

http://jsfiddle.net/fZeDZ/4/

This bug leads to a css problem when integrating jquery-mobile and angular-js.

Tobias

Changed September 12, 2011 08:05PM UTC by dmethvin comment:22

milestone: 1.6.11.7
resolution: fixed
status: closedreopened

Reopened for verification that 1.7 really fixed the sucker. Thanks for the test cases!

Changed September 14, 2011 11:29PM UTC by dmethvin comment:23

status: reopenedopen

Changed September 22, 2011 12:21AM UTC by dmethvin comment:24

resolution: → fixed
status: openclosed

Changed December 09, 2011 06:45PM UTC by dmethvin comment:25

#10989 is a duplicate of this ticket.