mouseleave 事件不会在 IE11 中的鼠标滚轮滚动时触发

Question

当使用鼠标滚轮向下滚动页面时，mouseleave 事件在 IE11 中只有在移动光标后才会触发。在 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');
});

是否有任何已知的解决方法来强制事件在滚动时触发？

jQuery 似乎有同样的问题：https://api.jquery.com/mouseleave/

Answer 1

您可以将侦听器放入函数中，并附加一个 scroll eventListener。在那里你可以检查鼠标光标是否仍然是 'inside' 和 'box' 并调用适当的函数：

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

mouseleave 事件不会在 IE11 中的鼠标滚轮滚动时触发

mouseleave event does not fire on mouse wheel scroll in IE11

javascript

jquery

scroll

mouseleave

internet-explorer-11