jquery - 为什么执行此悬停的 mouseenter 部分，而不执行 mouseleave？

Question

我正在使用this syntax option用于 jquery 悬停。

这是我的代码:

$('mySelector')
    .hover(
        function(){
            $(this).html('<img src="images/myImage2.png" height="23" width="24" />');
        },
        function(){
            $(this).html('<img src="images/myImage1.png" height="23" width="24" />');
        }
    );

mySelector 引用的元素的原始文本是 mouseleave 选项 - $(this).html('<img src="images/myImage1.png" height="23" width="24" />');

第一个用于 mouseenter/mouseover 的处理程序工作正常。但是第二个处理程序，用于 mouseleave/mouseout(应该恢复原始图像)，永远不会执行。当我在 firebug 中跟踪它时，触发了 mouseover 事件，但未到达第二个“function()”。

编辑:

为了清楚起见，我的 html 代码是这样的:

<div id="results">
   <span class="imageClass"><img src="images/myImage1.png" height="23" width="24" /</span>
</div>

然后我的选择器是 "#results .imageClass"

Answer 1

此问题的原因可能是触发 mouseenter 的元素。事件(即 <img> 节点)在触发 mouseleave 之前从 DOM 中删除事件。该事件由mySelector捕获并处理。的事件处理程序，但是 <img>是事件的实际来源。因此，mouseleave 是有道理的。事件不是由新的 <img> 触发的，因为鼠标一开始就没有进入过它。

澄清一下:事件处理程序绑定(bind)到的 DOM 节点 ( mySelector ) 与首先触发事件的节点 ( <img> ) 不同。因为<img>该事件没有自己的处理程序，该事件将 bubble up through the DOM tree直到它遇到一个节点(在本例中为 mySelector )。

事实证明adeneo's solution确实有效，尽管他/她的答案不准确。这是一个工作示例: jsbin.com/ikolog 。

有用的资源:

• DOM Events (MDN)
• Event Propagation Example (MDN)
• 如何 Stop Event Propagation (MDN)