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

【问题标题】：mouseleave event does not fire on mouse wheel scroll in IE11mouseleave 事件不会在 IE11 中的鼠标滚轮滚动上触发
【发布时间】：2015-10-09 13:08:13
【问题描述】：

当使用鼠标滚轮向下滚动页面时，鼠标离开事件不会在 IE11 中触发，直到光标移动。在谷歌浏览器中运行良好。

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/

【问题讨论】：

明显的区别是 IE 在滚动后不会更新鼠标位置，而 chrome 会。触发 mousemove 似乎无法强制它更新...
我使用的是 chrome 版本 45.0.2454.101，它的行为与 IE11 相同 - 滚动且不移动鼠标时不会更新。这可能只是预期的行为。
@Shahar 这很奇怪，我也在 Chrome 45.0.2454.101 上，我可以看到行为与 IE 不同，滚动离开会触发 mouseleave
这很奇怪，尽管现在它的行为与您描述的一样。我认为它与窗口的焦点有关（有时当窗口失焦时，行为很奇怪）。

标签： javascript jquery scroll internet-explorer-11 mouseleave

【解决方案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);

【讨论】：

感谢 LuudJacobs，这几乎就是我最终要解决的问题。