onmouseover 在 click 和 mouseout 事件之前触发？

Question

Unusable links with onmouseover() 有一个有趣的问题，当我试图回答它时。经过一些日志记录实验，我设置了http://jsfiddle.net/RnGxP/1/。最后两个示例按预期工作，单击“关闭”或离开“关闭”div 时隐藏。

前两个示例为 div 设置一个新的innerHTML每当鼠标在其中移动（我自己从来不会这样做，但是...）。 因此，当将鼠标移入其中之一时，它们会被扩展。在链接或“关闭”div 上进一步移动鼠标，会触发更多移动事件。

但是，在第二个示例中单击关闭按钮 - 不移动鼠标 - 触发了两个 mousemove 事件，而不是单击事件！ 这里到底发生了什么？我可以理解在重置innerHTML时点击事件会以某种方式丢失（失去目标？），但是为什么mousemove事件之前触发?

Answer 1

您正在重写mouseover 事件中div 元素的innerHTML。这意味着每次您移动鼠标时，它实际上是在一个新节点上移动，这会在该节点上触发一个新的mouseover 事件，该事件会冒泡到div 元素，它会重写innerHTML 等.

所以当mouseout 事件在内部div 上触发时，mouseover 事件已经重写了外部div 上的innerHTML，因此内部div 没有父级。 ..

您真正想要使用的是mouseenter 事件（可能是内部mouseleave 事件div），它曾经是Internet Explorer 专有的，但根据MDN Firefox 10 和Opera 11.10也支持一下。