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

Question

Google Chrome中的奇怪行为！

我有一个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 -

此行为仅在操作系统Windows 8上 ，我只是在Mac上测试它，并且没有问题！

好吧，我一直在几个网站上测试这种行为，比如这个：https://devart.withgoogle.com/

我认为谷歌专业人士制作了这个奇怪的行为，我会尝试找到如何联系谷歌Chrome团队...

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