Question

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

Desired mouse-over behavior in nested divs

我尝试过mouseover，mouseout，mouseenter，mouseleave和mousemove的组合，但似乎没有简单的解决方案给了我预期的行为。我能够在正确的div上接收鼠标事件，但这些事件通常会被更高级别的div接收，然后这些事件将不应该被重点关注。

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

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

我已经能够按如下方式使用它：当div收到b / mouseenter事件时，标记它并搜索整个DOM子树。如果发现任何其他标志更深，放弃焦点。但这是相当粗糙的，我不能帮助，但认为必须有一个更简单的方法。

使用over和mouseover以及对mouseout的调用似乎效果很好。这是一个显示工作解决方案的JSFiddle。

Answer 1

您可以使用事件stopPropagation()方法：

如果使用jQuery，请尝试在作为第一个参数传递的事件上调用stopPropagation()

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

此外，您可以检查哪个元素是目标，如event.target。

Answer 2

对于非IE浏览器＆amp; IE＆gt; = 9使用，

    evt.stopPropagation();

对于Legacy IE浏览器（IE＆lt; 9）浏览器使用

    evt.cancelBubble = true;

这样可以防止事件冒泡到父元素。