为什么执行此悬停的 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> 触发是有道理的，因为鼠标从一开始就没有进入它。

澄清：事件处理程序绑定到的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)

Answer 2

您正在替换整个元素，并且新元素没有绑定事件处理程序，并且由于它与您最初绑定的元素不同，因此无法与悬停功能一起使用，请尝试：

$('mySelector').hover(function(){
        $('img', this).prop('src', 'images/myImage2.png');
    },
    function(){
        $('img', this).prop('src', 'images/myImage1.png');
    }
);

或者，如果这不是一个选项，请使用 on() 委托事件

Answer 3

我同意 PPvG，他在his answer 中声明：

这个问题的原因是触发 mouseenter 事件的元素（即节点）从 DOM 中删除。该事件将 DOM 冒泡到 mySelector，在那里它被捕获和处理，但它是事件的源。因此，mouseleave 事件不是由 new 触发的（鼠标从一开始就没有进入它）是有道理的。

因此，作为解决方案，您可以使用.attr('src','full_url_here')。 adeneo 在their answer 中建议以下代码：

$('#myImg').hover(function()
    {
        $(this).attr("src","http://cdn1.iconfinder.com/data/icons/dellios_system_icons/png_128/css-grey.png");
    },
    function(){
        $(this).attr("src","http://cdn1.iconfinder.com/data/icons/dellios_system_icons/png_128/css.png");
    }
);

附加的 HTML 代码：

<div id="mySelector">
    <img id="myImg" src="http://cdn1.iconfinder.com/data/icons/dellios_system_icons/png_128/css.png" />
</div>

最后是一个演示：http://jsbin.com/elofoc/7/edit#preview