调整窗口大小时在 chrome 中触发 Mouseenter 事件

Question

谷歌浏览器中的非常奇怪的行为！

我有一个 div 网格，然后，我为 mouseenter 事件添加了一个 eventListenner。在我的演示代码中，当触发事件时，div 会得到 opacity:0.2。

$(".target_div_class").on("mouseenter",  [my action ...])

嗯，它适用于除 Google Chrome 之外的所有浏览器。

为了重现 chrome 中的奇怪行为，go to my codepen demo page 将鼠标指针放在网格前面并开始快速调整主浏览器窗口的大小，即使没有鼠标，您也会看到一些 div 的不透明度发生变化翻车！

我做错了什么，是 Chrome 不喜欢的特殊 jquery 事件？

谢谢

拉里

编辑-1-

我想我明白为什么有些div 会收到这个事件。

似乎是，当我点击浏览器的一个边框（左或右）时，Chrome 会跟踪鼠标位置 X 和 Y。

然后当慢慢扩大浏览器宽度时，任何在这个“鼠标起始位置”下的div都会收到该事件。 首先浏览器宽度变细，然后慢慢扩大，如果我拿笔放在鼠标开始位置，然后再调整大小，就很清楚了。非常非常奇怪。

编辑-2-

此行为仅在 OS windows 8 上，我刚刚在 Mac 上测试过，没有问题！

嗯，我已经在几个网站上测试了这种行为，比如这个：https://devart.withgoogle.com/

我想是谷歌专业人士制作的，奇怪的行为再次出现，我会尝试找到如何联系谷歌浏览器团队......

Answer 1

我不相信 chrome 完全支持 mouseenter/mouseleave。与 IE 不同，Chrome 只模拟这些功能。

但是，只有当有人尝试重新调整窗口大小比浏览器边缘实际移动的速度更快并且鼠标暂时进入页面时，才会出现问题。所以，这不是不合理的行为。你总是可以尝试用一个

$(window).resize(function() {
    //some code to reset opacity
});

Answer 2

看看有没有帮助

$(".target_div_class").on("mouseenter", function(){
 event.stopPropagation();
   //your code
});