jQuery 是不是有 .delegate('hover') 的句柄？

Posted 2023-02-21

【中文标题】jQuery 是不是有 .delegate(\'hover\') 的句柄？

【英文标题】：Does jQuery have a handleout for .delegate('hover')?jQuery 是否有 .delegate('hover') 的句柄？

【发布时间】：2011-06-13 22:11:12

【问题描述】：

我正在尝试使用：

$('mydiv').delegate('hover', function()   
    $('seconddiv').show();  
, function()   
    //For some reason jQuery won't run this line of code  
    $('seconddiv').hide();  
);

【问题讨论】：

如果您提供 html 示例，我可以针对您的标记给出更具体的答案。

【参考方案1】：

User113716 的出色答案将不再适用于 jQuery 1.9+，因为不再支持 伪事件 hover (upgrade guide)。

此外，由于 jQuery 3.0 delegate() 用于绑定事件已正式弃用，因此请使用 new on()^(docs) 进行所有事件绑定。

您可以通过将hover 替换为mouseenter mouseleave 并切换到on() 语法来轻松迁移user113716 的解决方案：

$('mydiv').on('mouseenter mouseleave', 'seconddiv', function(event) 
    $(this).toggle( event.type === 'mouseenter' );  
);

如果您的问题比简单的toggle 更复杂，我建议绑定两个单独的事件：

$('mydiv').on('mouseenter', 'seconddiv', function( event ) 
    // do something
).on('mouseleave', 'seconddiv', function( event ) 
    // do something different
);

注意： 由于 hover 在 v1.9 中被删除，on() 在 v1.7 中被引入，所以没有真正需要使用 delegate() 的解决方案 - 但如果你喜欢出于某种原因；它仍然存在（目前）并且可以完成工作：

$('mydiv').delegate('seconddiv','mouseenter mouseleave', function(event) 
    $(this).toggle( event.type === 'mouseenter' );  
);

【讨论】：

我不知道你可以使用on绑定两个事件

delegate() 在 3.0 中已弃用 jquery.com/upgrade-guide/3.0/…

【参考方案2】：

使用 delegate()^(docs) ，您将其分配给容器，第一个参数是应该触发事件的元素。

另外，.delegate() 只接受一个函数，因此对于hover 事件，您需要测试event.type 以确定show()^(docs) 或hide()^(docs)。

$('.someContainer').delegate('.someTarget','hover', function( event ) 
    if( event.type === 'mouseenter' )  
        $('seconddiv').show();  
    else
        $('seconddiv').hide();  
);

对于显示/隐藏，更短的编写方法是使用toggle()^(docs)，它可以接受switch 参数，其中true 表示show，false 表示hide ：

$('.someContainer').delegate('.someTarget','hover', function( event ) 
    $('seconddiv').toggle( event.type === 'mouseenter' );  
);

请注意，mouseenter 事件报告为 jQuery 1.4.3。如果您使用的是1.4.2，则会报告为mouseover。

---

编辑：

如果我在下面理解你的 cmets，你就会有这样的东西（当然使用正确的选择器）。

$('mydiv').delegate('seconddiv','hover', function( event ) 
    $(this).toggle( event.type === 'mouseenter' );  
);

【讨论】：

第二个div在第一个之内。当我使用 mouseover 时，一旦鼠标移到 seconddiv 上，它就会消失，只有在我将鼠标悬停在 mydiv 上时才会显示。

@Chris：您是说当您将鼠标悬停在mydiv 上时，您希望其嵌套的seconddiv 显示，然后在您离开mydiv 时隐藏？ mydiv 元素在加载时是页面的一部分吗？还是稍后添加？

seconddiv 嵌套在第一个 div 中。有时 mydiv 在页面加载时存在，有时在加载 DOM 后添加。

@Chris：我想我明白了。我会更新，如果是你的意思，你可以告诉我。

我没有意识到 mouseenter 是一种可供选择的类型。

【参考方案3】：

我知道 OP 想要一个 delegate 解决方案（当我遇到这个问题时我也是……）

但经过进一步的调查，我发现完全不用js/jquery代码也可以达到同样的效果

你只需要一点CSS

.someContainer .seconddiv
    display : none;


.someContainer:hover .seconddiv
    display : block;

INMO 它是一种更有效/更轻的解决方案

【讨论】：

这是一种使用 CSS 的好方法——当我遇到这个问题时，我需要在鼠标进入后触发另一个 JS 事件。

如果您需要在触摸屏设备上与.seconddiv 中的某些内容进行交互，请小心...事件的顺序将首先触发悬停，然后单击进入.seconddiv

【参考方案4】：

.delegate() 没有句柄。此外，您需要使用第一个参数指定要定位的元素。

不过，您可以尝试这样的方法：

$('table').delegate('tr', 'hover', function()   
    $(this).toggle();
);

【参考方案5】：

编辑：错误信息已删除。

如果您想在没有委托的情况下使用 hover() 方法，工作代码将如下所示：

$('#mydiv').hover(function()   
    $('#seconddiv').show();  
, function()   
    $('#seconddiv').hide();  
);

其次，delegate 是给一个孩子分配一个事件处理器，所以需要先指定一个选择器。如果您需要确保动态添加的元素存在此事件处理程序，我更喜欢 .live() 在这种情况下使用 mouseenter 和 mouseleave。

$('#mydiv').live('mouseenter', function()   
    $('#seconddiv').show();  
).live('mouseleave', function()   
    $('#seconddiv').hide();  
);

【讨论】：

jQuery 接受hover 作为bind、live 和delegate 的事件类型。它映射到mouseenter/mouseleave。

这是不正确的。 hover 是一种事件类型。它甚至在 jQuery 文档中用作 delegate 的示例。 api.jquery.com/delegate

谢谢。它没有显示在 .bind 方法的 API 文档中，所以我没有意识到。

我对 bind 的看法是错误的。仅适用于live 和delegate。

第二个 div 嵌套在第一个 div 中，如果你将鼠标悬停在第二个 div 上，它就会消失。