Javascript 正确跟踪哪个（嵌套的）div上有鼠标

我有一个

s的（深层）嵌套结构。使用Javascript，我希望跟踪鼠标当前在哪个元素上（即“有焦点”），其中嵌套较深的元素具有优先级：

我尝试了

mouseover

、

mouseout

、

mouseenter

、

mouseleave

和

mousemove

的组合，但似乎没有简单的解决方案可以提供我预期的行为。我能够在右边的div上接收鼠标事件，但通常这些事件随后会被更高级别的div接收，这会不公平地引起关注

例如，在上面从

a

到

c

的转换过程中，

b

最后可能接收到事件，无意中将焦点放在

b

而不是

c

。或者由于某种原因，从

c

到

b

的转换可能根本没有注册

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

我已经能够让它按如下方式工作：当一个div收到一个

mouseenter

/

over

事件时，标记它并搜索整个DOM子树。如果在更深的地方发现任何其他标志，请放弃焦点。但这相当粗糙，我忍不住认为一定有更简单的方法

编辑：解决方案

---

使用

mouseover

和

mouseout

，再加上调用

stopPropagation（）

似乎效果很好。下面是一个演示工作解决方案的示例。

您可以使用事件

stopPropagation（）

方法：

如果使用jQuery，请尝试对作为第一个参数传递的事件调用

stopPropagation（）

---

此外，您还可以检查哪个元素是目标，如非IE浏览器&IE>=9使用的

event.target

    evt.stopPropagation();

---

对于传统IE浏览器（IEThis是一个普通的方法，谢谢，更新了答案。很抱歉在Vanella JS之前陷入jQuery。谢谢！以正确的方式使用

stopPropagation

，这是我所缺少的一个难题。：-）但是

mouseenter

不起作用。我不得不用鼠标盖使它正常工作。下面是一个示例来显示我的工作代码。也许你可以调整一下你的答案。事实上，如果你能解释一下为什么

mouseover

在这里起作用，而

mouseenter

在这里不起作用，那将大有帮助干杯谢谢调整后的答案。我的随机猜测可能是mouseenter发生得如此之快，以至于它首先发生在out-DVI上，而浏览器可能在等待mouseover。在移动浏览器中，滑动和单击会发生类似的情况，浏览器会尝试通过等待300毫秒再触发单击来解决问题，以防您单击开始滑动。谢谢。我也遇到了类似的问题。你的解决方案有帮助。

    evt.stopPropagation();

    evt.cancelBubble = true;