Bug Tracker

Ticket #9069 (closed bug: fixed)

Opened 4 years ago

Last modified 3 years ago

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

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

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

Change History

comment:1 Changed 4 years ago by gnarf

  • Keywords live added
  • Status changed from new to open
  • Component changed from unfiled to event

comment:2 Changed 4 years ago by dmethvin

  • Owner set to dmethvin
  • Priority changed from undecided to blocker
  • Status changed from open to assigned

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

comment:3 Changed 4 years ago by Anders Bondehagen <anders@…>

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

comment:4 Changed 4 years ago by timmywil

#9143 is a duplicate of this ticket.

comment:5 Changed 4 years ago by anonymous

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/

comment:6 Changed 4 years ago by T.J. Crowder

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).

comment:7 Changed 4 years ago by timmywil

  • Milestone changed from 1.next to 1.6.1

comment:8 Changed 4 years ago by rwaldron

#9211 is a duplicate of this ticket.

comment:9 Changed 4 years ago by John Resig

  • Status changed from assigned to closed
  • Resolution set to fixed

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

Changeset: 419b5e5e2a0d376e71c3f37bf9a3d96f3b4a67f2

comment:10 follow-up: ↓ 12 Changed 4 years ago by 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.

comment:11 follow-up: ↓ 13 Changed 4 years ago by rwaldron

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

comment:12 in reply to: ↑ 10 Changed 4 years ago by Bill

Replying to 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

comment:13 in reply to: ↑ 11 Changed 4 years ago by anonymous

Replying to 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

comment:14 follow-up: ↓ 15 Changed 4 years ago by rwaldron

Yes, please provide your example case

comment:15 in reply to: ↑ 14 Changed 4 years ago by Bill

Replying to 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

comment:16 follow-up: ↓ 17 Changed 4 years ago by 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.

comment:17 in reply to: ↑ 16 ; follow-up: ↓ 18 Changed 4 years ago by Bill

Replying to 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.

comment:18 in reply to: ↑ 17 Changed 4 years ago by Bill

Replying to Bill:

Replying to 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.

comment:19 Changed 4 years ago by rwaldron

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 )

comment:20 Changed 3 years ago by rwaldron

#10192 is a duplicate of this ticket.

comment:21 Changed 3 years ago by tigbro

(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

comment:22 Changed 3 years ago by dmethvin

  • Status changed from closed to reopened
  • Resolution fixed deleted
  • Milestone changed from 1.6.1 to 1.7

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

comment:23 Changed 3 years ago by dmethvin

  • Status changed from reopened to open

comment:24 Changed 3 years ago by dmethvin

  • Status changed from open to closed
  • Resolution set to fixed

comment:25 Changed 3 years ago by dmethvin

#10989 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.