Question

我有这段代码：

<!-- 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时，它完美地工作，为什么？

Answer 1

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

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

Jquery：mouseover / mouseenter with delegate

1 个答案: