Jquery：带委托的鼠标悬停/鼠标输入

Posted 2023-03-29

【中文标题】Jquery：带委托的鼠标悬停/鼠标输入

【英文标题】：Jquery: mouseover/mouseenter with delegate

【发布时间】：2012-02-23 03:35:13

【问题描述】：

我有这个代码：

<!-- language: lang-js -->

$('#trajectory-sequence').delegate('li:not(.disabled)','mouseenter mouseleave', function( event ) 

    if( event.type == 'mouseenter') 
        $(this).find("div:gt(0)").show();
    else if(event.type=='mouseleave')
        $(this).find("div:gt(0)").hide(); 
);

显示/隐藏一些孩子。现在，当鼠标悬停在其中一个孩子身上时，我想执行一个动作。我有这个：

<!-- language: lang-js -->

$('#trajectory-sequence').delegate('li:not(.disabled) div:nth-child(4)','mouseover', 
function( ) 
    alert('mouseover');
);

但似乎从未触发 mouseover 事件。但是当我使用 mouseenter 而不是 mouseover 时，它可以完美运行，为什么？

【问题讨论】：

您使用的是哪个 jQuery 版本？ delegate() 已委托给过去，请参阅api.jquery.com/on

【参考方案1】：

mouseenter 事件与 mouseover 处理事件冒泡的方式不同。

使用mouseover 事件，如果鼠标指针移到内部元素上，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseenter 事件仅在鼠标进入它所绑定的元素而不是后代元素时触发其处理程序。所以mouseenter 有效。