The mouseenter and mouseleave events don't fire unless the mouse is moved

Reported by:	BillyRayPreachersSon	Owned by:
Priority:	low	Milestone:	None
Component:	event	Version:	git
Keywords:		Cc:	dmethvin
Blocked by:		Blocking:

Description

jQuery's emulated mouseenter and mouseleave events do not fire when the page is scrolled via the mousewheel, unless the mouse is moved afterwards.

The the same is partially true in IE (at least IE 8 - I've not tested in IE 9 or IE 10), in that the events are not fired when the page is scrolled, it does not have to be a mousemove event that triggers the events to fire. For example, it could be another scroll of the wheel, or pressing the Caps Lock key.

I've tested with both jQuery v1.6.4 ( ) and v1.7 pre-live from Git ( ).

To see the issue, place the mouse over any of the div elements and scroll up or down using the mouse wheel. In IE, the highlighting works while you continue to scroll. In the latest Chrome and Safari for OSX, it does not. Interestingly, the highlighting does work in the lastest Fx and Opera for OSX, but as this is not true of all browsers, I'm guessing it's down to their event handling rather than jQuery doing something special.

If you don't scroll with the mousewheel, and instead move the mouse cursor up / down, then the highlighting works in all browsers.

This might be a tricky one to resolve, as (at least in IE 8), replacing the paragraph elements with anchors and tabbing through them fails to fire the event at all, so obviously the behaviour isn't well implemented in IE anyway.

A good quick win (getting a lot closer to how they behave in IE, and that most people might see in day-to-day usage) would be to fire them if necessary when the page is scrolled by any means that causes mousewheel or DOMMouseScroll events to be fired.

Attachments (0)

Change History (7)

Changed October 29, 2011 08:12PM UTC by anonymous comment:1

Isn't this the case even for plain HTML? For example, links don't react when mouseover through scrolling. Would be nice if it did fire, though!

Changed October 29, 2011 11:06PM UTC by rwaldron comment:2

cc:	→ dmethvin
component:	unfiled → event
description:	\ jQuery's emulated mouseenter and mouseleave events do not fire when the page is scrolled via the mousewheel, unless the mouse is moved afterwards. \ \ The the same is partially true in IE (at least IE 8 - I've not tested in IE 9 or IE 10), in that the events are not fired when the page is scrolled, it does not have to be a mousemove event that triggers the events to fire. For example, it could be another scroll of the wheel, or pressing the Caps Lock key. \ \ I've tested with both jQuery v1.6.4 ( http://jsfiddle.net/G4wtd/7/ ) and v1.7 pre-live from Git ( http://jsfiddle.net/G4wtd/8/ ). \ \ To see the issue, place the mouse over any of the div elements and scroll up or down using the mouse wheel. In IE, the highlighting works while you continue to scroll. In the latest Chrome and Safari for OSX, it does not. Interestingly, the highlighting does work in the lastest Fx and Opera for OSX, but as this is not true of all browsers, I'm guessing it's down to their event handling rather than jQuery doing something special. \ \ If you don't scroll with the mousewheel, and instead move the mouse cursor up / down, then the highlighting works in all browsers. \ \ This might be a tricky one to resolve, as (at least in IE 8), replacing the paragraph elements with anchors and tabbing through them fails to fire the event at all, so obviously the behaviour isn't well implemented in IE anyway. \ \ A good quick win (getting a lot closer to how they behave in IE, and that most people might see in day-to-day usage) would be to fire them if necessary when the page is scrolled by any means that causes mousewheel or DOMMouseScroll events to be fired. \ → \ jQuery's emulated mouseenter and mouseleave events do not fire when the page is scrolled via the mousewheel, unless the mouse is moved afterwards. \ \ The the same is partially true in IE (at least IE 8 - I've not tested in IE 9 or IE 10), in that the events are not fired when the page is scrolled, it does not have to be a mousemove event that triggers the events to fire. For example, it could be another scroll of the wheel, or pressing the Caps Lock key. \ \ I've tested with both jQuery v1.6.4 ( ) and v1.7 pre-live from Git ( ). \ \ To see the issue, place the mouse over any of the div elements and scroll up or down using the mouse wheel. In IE, the highlighting works while you continue to scroll. In the latest Chrome and Safari for OSX, it does not. Interestingly, the highlighting does work in the lastest Fx and Opera for OSX, but as this is not true of all browsers, I'm guessing it's down to their event handling rather than jQuery doing something special. \ \ If you don't scroll with the mousewheel, and instead move the mouse cursor up / down, then the highlighting works in all browsers. \ \ This might be a tricky one to resolve, as (at least in IE 8), replacing the paragraph elements with anchors and tabbing through them fails to fire the event at all, so obviously the behaviour isn't well implemented in IE anyway. \ \ A good quick win (getting a lot closer to how they behave in IE, and that most people might see in day-to-day usage) would be to fire them if necessary when the page is scrolled by any means that causes mousewheel or DOMMouseScroll events to be fired. \
priority:	undecided → low

Judging by the OP's own admission, this seems like more code then it's actually worth. I'm going to cc Dave Methvin to weigh in

Changed October 29, 2011 11:21PM UTC by rwaldron comment:3

Sorry, my mobile likes pull links out of the original desc. I'll fix when I get to a machine

Changed October 30, 2011 01:08AM UTC by dmethvin comment:4

status:	new → open

Missing links from OP:

I've tested with both jQuery v1.6.4 ( http://jsfiddle.net/G4wtd/7/ ) and v1.7 pre-live from Git ( http://jsfiddle.net/G4wtd/8/ ).

I'm not seeing the problem in both versions on Firefox 7, but am seeing it in Chrome 14 and IE9. It also happens if you scroll the page with arrow keys. As far as I can tell, at least in Chrome, the mouseover/mouseout events only fire when the mouse moves over the page, not vice-versa.

Since this isn't a regression I'll mark it open and we'll look at it. I suspect we will need to push this to the browser makers. If it is not firing events there is nothing we can do.

Changed October 30, 2011 01:32AM UTC by BillyRayPreachersSon comment:5

I wouldn't say that it's not worth fixing... I just don't think it's worth trying to determine every scenario where IE will (or will not) fire the event, as many of them are unlikely to ever cause an issue for the majority of developers.

However, I'd say that scrolling pages using the mousewheel has become second nature to most users, especially with the many touch-sensitive mice / trackpads now available from Apple, Microsoft, etc. For this reason, I'd say it's worth bringing jQuery's behaviour into line with IE and firing enter / leave events when the wheel is clicked or scrolled.

You've also got the behaviour of Fx and Opera to take into account, where they behave as I would expect (at least, the latest version of Fx and Opera on OSX). Whether due to some quirk in jQuery or due to browsers firing a few more events, there's still a discrepancy among non-IE browsers for the same jQuery code, and I think it would be nice to bring WebKit browsers up to the same level as the rest.

Changed October 30, 2011 01:35AM UTC by dmethvin comment:6

I wouldn't say that it's not worth fixing

I didn't say that either. I said that if it isn't firing the event I don't think we *can* fix it. Unless there is something jQuery is doing to stop them from firing the event?

Changed November 16, 2011 07:40PM UTC by dmethvin comment:7

resolution:	→ patchwelcome
status:	open → closed

I don't see a way to fix this since the browser doesn't fire any event. Please let us know if you see a solution.

Side navigation

#10618 closed bug (patchwelcome)