将委托（）与悬停（）一起使用？答案

【问题标题】：Using delegate() with hover()?将委托（）与悬停（）一起使用？
【发布时间】：2011-03-23 00:27:10
【问题描述】：

我有一个包含许多 li 项目的 ul 元素：

<ul>
    <li></li>
    ...
</ul>

当用户将鼠标悬停在 li 元素上时，我想在 li 上显示一些隐藏按钮，当他们停止悬停时，再次隐藏按钮。尝试使用委托：

$("#myList").delegate("li", "hover", function () {
    if (iAmHovered()) {
        showButtons();
    } else {
        hideButtons();
    }
});

上面的代码同时被hover和'un-hover'调用。怎么区分是离开还是进入呢？

另外，我从这个问题中得到了这个样本： .delegate equivalent of an existing .hover method in jQuery 1.4.2

尼克说：

这取决于 [#myList] 不会通过 AJAX 或其他方式被替换，因为这是事件处理程序所在的位置。

我确实替换了#myList 的内容，使用：

$("#myList").empty();

这会导致问题吗？

谢谢

【问题讨论】：

标签： jquery

【解决方案1】：

您需要测试事件的类型，如下所示：

$("#myList").delegate("li", "hover", function ( event ) {
    if (event.type == 'mouseover') {
        showButtons();
    } else {
        hideButtons();
    }
});

由于两个事件只有一个处理程序可以运行，我们正在检查哪个事件被触发，并运行适当的代码。

与将hover 绑定直接绑定到能够接受两种事件类型的两个处理程序的元素相反。

编辑：请注意，从jQuery 1.4.3 开始，将'hover' 与.delegate() 或.live() 一起使用时报告的事件类型不再是mouseover/mouseout（因为它应该成为）。现在是mouseenter/mouseleave，这看起来很傻，因为它们不是冒泡事件。

所以if() 语句看起来像：

if (event.type == 'mouseenter') {
    //...

【讨论】：

【解决方案2】：

您可以声明处理函数，使其注意事件参数，然后检查类型。

【讨论】：