Mouseleave event doesn't fire when mouse wheel scrolls in IE11

Question

When using the mouse wheel to scroll through the page, the mouseleave event does not fire in IE11 until the cursor is moved. Works great on Google Chrome.

jsFiddle: http://jsfiddle.net/tonyleeper/5vwf65f7/

HTML

<div class="box">Move the mouse cursor inside this box and observe the mouseenter event fires (background goes green). Next, use the mouse wheel to scroll down without moving the mouse cursor position, observe the mouseleave event doesn't fire. Finally, move the mouse cursor even a little, say 1px, and observe that the mouseleave event then fires</div> 

CSS

 .box { font-family: arial; font-size: 16px; width: 300px; height: 200px; background-color: #000077; color: #ffffff; } 

Javascript

 var box = document.getElementsByClassName('box')[0]; box.addEventListener('mouseenter', function (e) { document.body.setAttribute('style', 'background-color: #007700'); }); box.addEventListener('mouseleave', function (e) { document.body.setAttribute('style', 'background-color: #ffffff'); }); 

Are there any known workarounds for this method to make the event fire when scrolling?

jQuery seems to have the same problem: https://api.jquery.com/mouseleave/

Answer 1

You can include a listener in a function, as well as attach a scroll eventListener. There you can check whether the mouse cursor remains 'inside' of 'box' and calls the corresponding function:

 var triggerOnMouseLeave = function(e) { document.body.setAttribute('style', 'background-color: #ffffff'); } box.addEventListener('mouseleave', triggerOnMouseLeave); var triggerOnScroll = function(e) { // Using jQuery here if (!$(box).is(':hover')) { triggerOnMouseLeave(); } } window.addEventListener('scroll', triggerOnScroll);