mouseleave event does not fire on mouse wheel scroll in IE11

Question

When using the mouse wheel to scroll down a page, the mouseleave event is not firing in IE11 until the cursor is moved. Works fine in 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 to force the event to fire on scroll?

jQuery would appear to have the same issue: https://api.jquery.com/mouseleave/

Wien

The apparent difference is the IE doesn't update the mouse position after scrolling, whereas chrome does. Triggering mousemove doesn't seem to work to force it to update... – Emiliaemiliaromagna

I'm using chrome version 45.0.2454.101 and it's the same behavior as IE11 - does not update when scrolling away and not moving the mouse. This might just be the expected behavior. – Izanagi

@Izanagi That's odd, I'm also on Chrome 45.0.2454.101 and I can see the behaviour is different from IE, scrolling away fires mouseleave – Wien

It is odd, although now it behaves like you describe. I think it's related to the window's focus (sometimes when the window is out of focus the behavior is strange). – Izanagi

Answer 1

You could put your listener into a function and also attach a scroll eventListener. There you could check if the mouse cursor is still 'inside' the 'box' and call the appropriate 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);

Blackguardly

Thanks LuudJacobs, this is pretty much what I ended up doing to work around it. – Wien