onmouseover在click和mouseout事件之前被解雇了？ [英] onmouseover fired before click and mouseout events?

问题描述

与onmouseover（）的无法使用的链接提出了一个有趣的问题。经过一些记录实验，我已经设置了 http://jsfiddle.net/RnGxP/1/。最后两个示例按预期工作，单击关闭或离开关闭div时隐藏。

Unusable links with onmouseover() got an interesting question, when I tried to answer it. After some logging experiments, I've set up http://jsfiddle.net/RnGxP/1/. The last two examples work as expected, the hide when clicking on "Close" or leaving the "Close" div.

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

The first two examples set a new innerHTML to the div whenever the mouse moves in it (I'd never do that myself, but...). So, when moving the mouse into one of them they get expanded. And moving the mouse further on a link or the "close" div, more move events get fired.

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

But then, clicking on the close button in the second example - without moving the mouse -, instead of a click event two mousemove events are fired! What exactly happens here? I can understand that the click event gets lost in some way (loosing its target?) when resetting innerHTML, but why is the mousemove event fired before?

推荐答案

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

You are rewriting the innerHTML of the div element in the mouseover event. This means that each time you move the mouse it is in fact moving over a new node, which triggers a new mouseover event on that node, which bubbles up to the div element, which rewrites the innerHTML etc. etc.

所以当 mouseout 事件在内部 div 上触发时，鼠标悬停事件已在外部 div 上重写 innerHTML ，因此内部 div 没有父...

So by the time the mouseout event fires on the inner div, the mouseover event has already rewritten the innerHTML on the outer div, and so the inner div has no parent...

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

What you really want to use is the mouseenter event (and presumably the mouseleave event on the inner div), which used to be proprietary to Internet Explorer but according to MDN Firefox 10 and Opera 11.10 support it too.

这篇关于onmouseover在click和mouseout事件之前被解雇了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！