Question

我有一个包含许多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();

会导致问题吗？

由于

Answer 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') {
    //...

Answer 2

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

使用delegate（）和hover（）？

2 个答案: