gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 04:19:20 31 4
gpt4 key购买 nike

当使用鼠标滚轮向下滚动页面时,mouseleave 事件不会在 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/

最佳答案

您可以将您的监听器放入一个函数中,并附加一个 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);

关于javascript - mouseleave 事件不会在 IE11 中的鼠标滚轮滚动时触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33039121/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com