Question

使用鼠标滚轮向下滚动页面时，在移动光标之前，IE11中不会触发mouseleave事件。适用于谷歌浏览器。

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。在那里你可以检查鼠标光标是否仍然在'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);

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

1 个答案: