为啥我不能可靠地捕获 mouseout 事件？

Posted 2023-02-22

【中文标题】为啥我不能可靠地捕获 mouseout 事件？

【英文标题】：Why can't I reliably capture a mouseout event?为什么我不能可靠地捕获 mouseout 事件？

【发布时间】：2011-11-18 21:26:35

【问题描述】：

我需要知道鼠标光标何时离开div。所以我连接了mouseout 事件。但是，如果我很快将鼠标移出div，mouseout 事件不会触发。没错：鼠标光标 静止在div 内，现在在div 之外，但尚未调用mouseout 回调。 （如果我不那么快地移动鼠标，它工作得很好。）

顺便说一句，在最新的谷歌浏览器中确实如此——所以不仅仅是“旧浏览器”的问题。

解决方法：

关于这个问题的一个问题是posed before。显然这只是生活中的一个事实，我发现的唯一解决方法是手动监视mousemove 事件，每次检查光标的 x/y 坐标并查看它们是否落在div 的边界框内，因此如果光标不再在其中，您就有更多机会“注意到”。

与让浏览器以原生方式完成所有这些操作相比，对每个像素移动执行计算有点影响性能。编码也很乏味。

关于我的问题...

为什么浏览器不能可靠地捕获mouseout 事件？如果我可以使用上述解决方法可靠地判断鼠标何时离开div，为什么浏览器不能这样做？

我了解（从上面链接的答案）javascript 不会尝试插入“帧”。假设您在document 上放置了一个mousemove 处理程序，并以完美的水平线将鼠标快速向右移动200 像素，您可能不会获得200 个mousemove 事件。会错过一些。我对此没有意见。

但是，如果在鼠标越过div 的边界时错过了一些像素移动，为什么还要跳过mouseout 事件呢？当浏览器终于​​再次开始注册鼠标的位置时（在突然快速移动之后），即使鼠标现在 miles 在框外，关键是它曾经在框内而不再是。那么为什么它不触发 mouseout 事件呢？

我只是不明白为什么这对浏览器供应商来说是一个难以解决的问题。 （但我相信可能有一个很好的理由，我太愚蠢了，无法想到。）

我发布这个问题主要是出于好奇，但我希望答案可以提供一些见解，帮助我更有效地解决问题。此外，欢迎任何替代解决方法（比上面介绍的方法更快）。

【问题讨论】：

这对您绝对没有帮助（因此是评论，而不是答案），但这种行为绝对听起来像一个错误。这也可能很明显，但要解决您的问题“为什么还应该跳过 mouseout 事件？”，他的答案是 它没有，因为它是非故意的行为。

有趣。这实际上对我有很大帮助——如果你是对的，那是一个错误。对我来说似乎很奇怪，这种错误会存在于 Chrome 15 中！我将制作一个测试页面并在其他浏览器中尝试它，看看它的普及程度。我可能会向 crbug.com 提交一份错误报告，看看他们是怎么做的。谢谢。

仅供参考：Chrome 15 尚未进入稳定通道

@Ingenu：是的，不好的例子。但 Chrome 11-14（可能还有更早的版本）也是如此。我将看看其他浏览器是否也是这种情况（我必须先创建一个新的测试页面，因为我的示例是在 Chrome 扩展程序中）。

使用setInterval 是一种始终有效的解决方法（尽管这不是最好的）。无论触发什么事件或浏览器有什么怪癖，您都可以简单地每隔几毫秒检查一次。

【参考方案1】：

我知道您不想要解决方法，但您无需检查鼠标的 x/y 即可知道您是否在某个元素中。您可以简单地检查触发 mousemove 事件的元素。如果您在文档上放置鼠标移动，该事件将从其子元素之一触发，您可以将该元素与您的元素进行比较以了解它是否是其后代之一。

或者，如果你找到你的元素，你可以向上 parentNode 树并停止。然后你知道你在元素内部并且仍然在其中，否则你到达文档并且你出去了。

有些浏览器实现了 mouseenter/mouseleave 事件，我注意到，这些事件比 mouseout 更准确。 Prototype 和 jQuery 为不实现这些新事件的浏览器提供了一种解决方法。 Mouseleave 不会从元素的子元素触发，而 mouseout 会。

【参考方案2】：

您描述了非常快速地移动鼠标。停止时，指针是否仍在页面内？也就是说，您的鼠标指针是否仍然悬停在可见网页的某些部分上？

如果它已经跑到外面了，那么浏览器应该做什么就不一定清楚了。 mouseout 事件应该有一个relatedTarget 属性，该属性以鼠标指针进入的位置为目标。如果鼠标指针已经在页面区域之外，则没有相关的目标可以指向。

换句话说，当鼠标离开页面区域时，浏览器停止跟踪它并停止报告它的位置。如果您移动鼠标的速度足够快，从浏览器的角度来看，鼠标就会消失。直到您将鼠标移回可视页面的边界框后，浏览器才知道它在哪里，然后触发所有适当的基于移动的操作（例如 mouseout）。

【参考方案3】：

为什么浏览器不能可靠地捕获 mouseout 事件？如果我可以使用上述解决方法可靠地判断鼠标何时离开 div，为什么浏览器不能这样做？

我想你自己回答了这个问题，当你说：

与让浏览器在本地完成所有这些操作相比，对每个像素移动执行计算有点影响性能。

浏览器不会在帧之间进行插值，因此，正如您所说，它需要更多的资源和内存，这可能是它没有“固定”的原因。

如果在鼠标越过 div 的边界时错过了一些像素移动，为什么还要跳过 mouseout 事件？当浏览器最终再次开始注册鼠标的位置时（在突然快速移动之后），即使鼠标现在在盒子之外几英里，关键是它曾经在盒子里，现在不在了。那么为什么不触发 mouseout 事件呢？

我不确定，但我不认为这是“它在里面，现在它在外面”的条件。相反，它是否跨越了那个边界（如果MouseX - ElemOffsetX= 1）。我同意，这没有多大意义，但这可能是因为如果您将值设置为> 1，它将多次触发该事件。否则它必须跟踪事件，这不是 JS 的本质，看看它是如何将事件异步添加到堆栈中的。

---

您可以尝试使用jQuery's mouseleave event。这做了两件事，延迟了事件的触发：

它会遍历 DOM 树，看看它是否真的离开了元素 我认为它实现了超时调用，这应该可以解决您注意到的插值问题。

【参考方案4】：

我发现您的问题以及缺乏其他明确答案很有用，因为它告诉我必须创建一个解决方法。我使用您的问题和其他贡献者中提出的想法来做到这一点。

我在使用 jquery mouseleave elem.bind('mouseleave', data, mouseLeavesZon​​e); 时遇到同样的问题；

此问题是间歇性的，可能与客户端 CPU 繁忙有关。例如，当您的鼠标移出 div 时，CPU 正忙于其他地方。那么这可能是错误的原因似乎是合乎逻辑的。我同意;这应该由浏览器供应商解决。

见http://jsfiddle.net/bgil2012/gWP5x/1/

（顺便说一句：我的 JQuery 代码需要使用旧的 jQuery 方法，因为它必须在运行 jQuery 1.4 的 Drupal 7 中运行，此时并且不应用即将到来的补丁）。

【参考方案5】：

我几次遇到这个问题，我开始接受这个问题作为生活中的事实。但是根据您的需要，您可以像我一样使用 CSS。例如，如果我只想根据悬停的另一个元素显示/隐藏一个元素，那么 CSS 就是要走的路。这是一个有效的可靠示例：

.large 
  width: 175px; height: 175px;
  position: absolute;
  border-radius: 100%;

  /*hide the glass by default*/
  top: -9999px;
  left: -9999px;
  opacity: 0;
  transition: opacity .2s ease-in-out;
  z-index: 100;
  pointer-events: none;


.small:hover + .large 
  opacity: 1;

http://codepen.io/tanduong/pen/aBMxyd

【参考方案6】：

这是一个简单的解决方法。

在您的 onMouseOver 监听器中，您可以向窗口添加一个“mousemove”监听器：

<div onMouseOver=() => 
    setMouseOver(true)

    let checkMouseLeave = (e: MouseEvent) => 
        if (rootRef.current
            && !rootRef.current.contains(e.target as htmlElement)) 
            setMouseOver(false)
            window.removeEventListener('mousemove', checkMouseLeave)
        
    

    window.addEventListener('mousemove', checkMouseLeave)

></div>

然后您可以检查每个鼠标移动，直到鼠标位于您的 div 之外（在我们的示例中为 rootRef.current）。