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

【问题标题】：Properly keeping track of which (nested) div has mouse-over正确跟踪哪个（嵌套）div 有鼠标悬停
【发布时间】：2014-06-25 20:16:03
【问题描述】：

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

我尝试了 mouseover、mouseout、mouseenter、mouseleave 和 mousemove 的组合，但似乎没有简单的解决方案可以让我得到预期的行为。我能够在正确的 div 上接收鼠标事件，但通常这些事件随后会被更高级别的 div 接收，然后这些事件会不当地获得焦点。

例如，在上面从a 到c 的转换中，事件可能会被b 最后接收，无意中将焦点转移到b 而不是c。或者从c 到b 的转换可能由于某种原因根本没有注册。

我不太了解鼠标事件传播的基本机制，无法提出可靠的解决方案。看起来应该是这么简单的事情，但我想不通。

我已经能够让它按如下方式工作：当 div 接收到 mouseenter/over 事件时，标记它并搜索整个 DOM 子树。如果在更深处发现任何其他标志，请放弃焦点。但这很粗略，我不禁认为一定有更简单的方法。

编辑：解决方案

mouseover 和mouseout 的使用与对stopPropagation() 的调用相结合似乎效果很好。这是一个JSFiddle 来展示有效的解决方案。

【问题讨论】：

谢谢。我正在努力解决类似的问题。您的解决方案有所帮助。

标签： javascript html mouseover mousemove nested

【解决方案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。

【讨论】：

这是一个普通的方法developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation
谢谢，更新了答案。很抱歉在 Vanella JS 之前陷入 jQuery。
谢谢！以正确的方式使用stopPropagation 是我所缺少的一块拼图。 :-) 不过，它不适用于mouseenter。我必须使用mouseover 才能使其正常工作。这是一个fiddle 来显示我的工作代码。也许你可以调整你的答案。事实上，如果你能解释为什么 mouseover 在这里能做到这一点，而 mouseenter 却没有，那将非常有帮助。 --- 干杯！
谢谢。调整答案。我的随机猜测可能是 mouseenter 发生得如此之快以至于它首先发生在输出 DVI 上，而浏览器可能正在等待鼠标悬停。在移动浏览器中滑动和点击会发生类似的情况，浏览器会尝试通过在触发点击之前等待 300 毫秒来解决，以防您点击开始滑动左右。

【解决方案2】：

对于非 IE 浏览器和 IE >= 9 使用，

    evt.stopPropagation();

对于 Legacy IE 浏览器（IE

    evt.cancelBubble = true;

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

【讨论】：