Skip to main content

Bug Tracker

Side navigation

#9279 closed bug (fixed)

Opened May 13, 2011 09:48PM UTC

Closed September 21, 2011 03:30AM UTC

Last modified March 08, 2012 05:36PM UTC

delegate() bind does not handle mouseover/mouseout and mouseenter/mouseout correctly for selected elements

Reported by: thej3tan@gmail.com Owned by: dmethvin
Priority: blocker Milestone: 1.7
Component: event Version: 1.6.1
Keywords: 1.7-discuss Cc:
Blocked by: Blocking:
Description

Affects Version 1.6.1 only, 1.6 works fine

Tested in Firefox(3.6) and Chrome

Windows XP

May be related to Ticket #9069

Test Case:

<div id="test_box">

Test Box<br><br>

<a href="#" class="test1">Test 1</a><br><br>

<a href="#" class="test2">Test 2</a>

</div>

<script>

$(document).ready(function() {

$("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });

$("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });

$("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });

$("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });

});

mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.

Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.

Attachments (0)
Change History (20)

Changed May 13, 2011 10:00PM UTC by rwaldron comment:1

component: unfiledevent
owner: → thej3tan@gmail.com
status: newpending

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, I've created this boilerplate: http://jsfiddle.net/rwaldron/da3nM/ Open the link and click to "Fork" in the top menu.

Changed May 13, 2011 10:09PM UTC by thej3tan@gmail.com comment:2

status: pendingnew

Reduced Test Case

http://jsfiddle.net/ZE2Ug/3/

Changed May 14, 2011 09:48AM UTC by addyosmani comment:3

priority: undecidedlow
status: newopen

Confirmed. Works fine with 1.6 and below but there appears to be a regression in 1.6.1 where mouseover and mouseout aren't firing or being bound correctly.

Changed May 14, 2011 10:04PM UTC by rwaldron comment:4

This might be a little less cluttered for the basis of a unit/ref test

http://jsfiddle.net/rwaldron/vACb2/

Changed May 17, 2011 01:51PM UTC by rwaldron comment:5

priority: lowblocker

Changed May 17, 2011 01:51PM UTC by rwaldron comment:6

#9312 is a duplicate of this ticket.

Changed May 22, 2011 07:27PM UTC by john comment:7

keywords: → 1.7-discuss

Nominating ticket for 1.7 discussion.

Changed May 22, 2011 08:43PM UTC by rwaldron comment:8

description: Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.

+1, Seems like a bug, should be fixed

Changed May 23, 2011 12:50AM UTC by jaubourg comment:9

+1, Bug bug bug

Changed May 23, 2011 04:48AM UTC by timmywil comment:10

+1,

Changed May 24, 2011 09:55PM UTC by dmethvin comment:11

description: Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.

+1, although this is a bug not a feature.

Changed June 03, 2011 02:01PM UTC by john comment:12

description: Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.

+1

Changed June 05, 2011 09:54PM UTC by ajpiano comment:13

description: Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.

+1, BUG should be fixed for 1.6.2

Changed June 06, 2011 03:01PM UTC by scottgonzalez comment:14

description: Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.

+1

Changed June 06, 2011 03:11PM UTC by scottgonzalez comment:15

-1, cleverness != elegance

Changed June 15, 2011 03:12PM UTC by hlian comment:16

This is almost certainly due to the changeset for #9069. Reverse-applying https://github.com/jquery/jquery/commit/419b5e5e2a0d376e71c3f37bf9a3d96f3b4a67f2 fixes this bug (but would also regress #9069, so darn).

Changed June 15, 2011 03:24PM UTC by rwaldron comment:17

description: Affects Version 1.6.1 only, 1.6 works fine\ \ Tested in Firefox(3.6) and Chrome\ Windows XP\ \ May be related to Ticket #9069\ \ Test Case:\ \ <div id="test_box">\ Test Box<br><br>\ <a href="#" class="test1">Test 1</a><br><br>\ <a href="#" class="test2">Test 2</a>\ </div>\ <script>\ $(document).ready(function() {\ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); });\ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); });\ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); });\ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); });\ });\ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6.\ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.Affects Version 1.6.1 only, 1.6 works fine \ \ Tested in Firefox(3.6) and Chrome \ Windows XP \ \ May be related to Ticket #9069 \ \ Test Case: \ \ <div id="test_box"> \ Test Box<br><br> \ <a href="#" class="test1">Test 1</a><br><br> \ <a href="#" class="test2">Test 2</a> \ </div> \ <script> \ $(document).ready(function() { \ $("#test_box").delegate("a.test1", "mouseenter", function() { console.log('mouseenter'); }); \ $("#test_box").delegate("a.test1", "mouseleave", function() { console.log('mouseleave'); }); \ $("#test_box").delegate("a.test2", "mouseover", function() { console.log('mouseover'); }); \ $("#test_box").delegate("a.test2", "mouseout", function() { console.log('mouseout'); }); \ }); \ \ mousing over "Test 2" does not generate any output using 1.6.1 but works fine in older version including 1.6. \ \ Also noticed if we assign all 4 mouse events with the same selector (a.test1), only mouseenter and mouseleave are fired.

@hlian this bug is on the 1.7 fix list, so rest assured it will be dealt with for that release :)

Changed July 12, 2011 02:42PM UTC by dmethvin comment:18

milestone: 1.next1.7
owner: thej3tan@gmail.comdmethvin
status: openassigned

Changed September 08, 2011 01:46PM UTC by dmethvin comment:19

This code was reworked in 1.7, and yes there were issues that caused interference between mouseenter/leave and mouseover/out. I've created jquery/test/hovertest.html in the repo to verify all the cases work properly in 1.7 now.

Changed September 21, 2011 03:30AM UTC by dmethvin comment:20