正确跟踪哪个（嵌套的）div 具有鼠标悬停

Question

我有一个（深度）嵌套的<div>结构。使用Javascript，我想跟踪鼠标当前所在的元素（即，“拥有焦点”的元素），其中更深层次的嵌套元素具有优先权：

我尝试了mouseover、mouseout、mouseenter、mouseleave和mousemove的组合，但好像没有简单的解决方案能给我期望的行为。我能够在正确的

上接收鼠标事件，但通常这些事件随后会被更高层次的

接收，这将不应该获得焦点。

例如，在从到的过渡中，事件可能会最后由接收，无意中将焦点放在而不是上。或者从到的转换可能出现某些原因未被注册的情况。

我不理解鼠标事件传播的基本机制，无法想出可靠的解决方案。这似乎应该是一件很简单的事情，但我想不出来。

我已经能够使其正常工作：当一个

接收到mouseenter/over事件时，标记它并搜索整个DOM子树。如果发现任何其他标记更深入，则放弃焦点。但这相当粗糙，我不能不想有更简单的方法。

编辑：解决方案

使用mouseover和mouseout，结合调用stopPropagation()似乎非常有效。这里是一个JSFiddle，展示了工作正常的解决方案。

- mhelvens

---

谢谢你。我曾经遇到过类似的问题，但是你的解决方案帮了我很多。 - Sidd

Answer 1

您可以使用事件stopPropagation()方法： https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation 如果使用jQuery，请尝试在传递作为第一个参数的事件上调用stopPropagation()。 http://api.jquery.com/event.stoppropagation/

$( "p" ).on('mouseover', function( event ) {
  event.stopPropagation();
  // Do something
});

另外，你可以检查目标元素，比如使用event.target。

- Meligy

---

这是一个普通的方法 https://developer.mozilla.org/zh-CN/docs/Web/API/event.stopPropagation - Paul S.

谢谢，已更新答案。之前使用 jQuery 而不是原生 JS 真的很抱歉。 - Meligy

谢谢！正确使用stopPropagation是我缺失的拼图。:-)然而，它不适用于mouseenter。我必须使用mouseover才能使其正常工作。这里有一个fiddle来展示我的工作代码。也许你可以调整你的答案。事实上，如果你能解释为什么mouseover在这里起作用，而mouseenter则不行，那将非常有帮助。---干杯！ - mhelvens

感谢您的回答。我调整了答案。我的猜测是mouseenter事件发生得非常快，因此它首先发生在out DVI上，而浏览器可能需要等待一段时间才能触发mouseover事件。移动浏览器中也会出现类似的情况，滑动和点击之间有一个300毫秒的等待时间，以防止您正在点击以开始滑动等操作。 - Meligy

Answer 2

对于非IE浏览器和IE >= 9，请使用以下内容：

    evt.stopPropagation();

对于旧版IE浏览器（IE<9），请使用以下代码：

    evt.cancelBubble = true;

这将防止事件冒泡到父元素。

- msg