是否可以使用 jQuery .on 和悬停？

Question

我有一个<ul>，在初始页面加载后填充了 javascript。我目前正在使用.bind 与mouseover 和mouseout。

该项目刚刚更新到 jQuery 1.7，所以我可以选择使用 .on，但我似乎无法让它与 hover 一起使用。 .on 可以和hover 一起使用吗？

编辑：我绑定到的元素在文档加载后使用 javascript 加载。这就是我使用on 而不仅仅是hover 的原因。

Answer 1

（如果您需要将.on() 与使用 JavaScript 填充的元素一起使用，请查看此答案中的最后一个编辑）

将此用于未使用 JavaScript 填充的元素：

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover() 有自己的处理程序：http://api.jquery.com/hover/

如果你想做多件事，把它们链接到.on() 处理程序中，如下所示：

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

根据下面提供的答案，您可以使用hover 和.on()，但是：

虽然强烈建议不要使用新代码，但您可能会看到 伪事件名称“悬停”用作字符串的简写 “鼠标进入鼠标离开”。它为那些附加了一个事件处理程序 两个事件，处理程序必须检查 event.type 以确定 事件是 mouseenter 还是 mouseleave。不要混淆 使用 .hover() 方法的“悬停”伪事件名称，该方法接受一个 或两个函数。

此外，使用它并没有性能优势，而且它比仅使用 mouseenter 或 mouseleave 更庞大。我提供的答案需要更少的代码，并且是实现此类目标的正确方法。

编辑

这个问题已经有一段时间没有得到回答了，而且似乎已经引起了一些关注。上面的代码仍然有效，但我确实想在我原来的答案中添加一些东西。

虽然我更喜欢将mouseenter 和mouseleave 与.on() 一起使用（帮助我理解代码中发生了什么），但它与使用hover() 编写以下内容相同

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

由于最初的问题确实询问他们如何正确使用on() 和hover()，我想我会更正on() 的用法，并且当时没有必要添加hover() 代码.

2012 年 12 月 11 日编辑

下面提供的一些新答案详细说明了如果使用 JavaScript 填充所讨论的 div，.on() 应该如何工作。例如，假设您使用 jQuery 的 .load() 事件填充 div，如下所示：

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

.on() 的上述代码不成立。相反，您应该稍微修改您的代码，如下所示：

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

在.load() 事件发生后，此代码将适用于使用 JavaScript 填充的元素。只需将您的参数更改为适当的选择器即可。

Answer 2

当鼠标悬停在文档作为问题请求加载后创建的对象上时，这些解决方案都不适合我。我知道这个问题很老，但我有一个解决方案给那些仍在寻找的人：

$("#container").on('mouseenter', '.selector', function() {
    //do something
});
$("#container").on('mouseleave', '.selector', function() {
    //do something
});

这会将函数绑定到选择器，以便在文档准备好后使用此选择器的对象仍然能够调用它。

Answer 3

我不确定你的 Javascript 的其余部分是什么样的，所以我无法判断是否有任何干扰。但是.hover() 与.on() 一起作为一个事件工作得很好。

$("#foo").on("hover", function() {
  // disco
});

如果您希望能够利用其事件，请使用事件返回的对象：

$("#foo").on("hover", function(e) {
  if(e.type == "mouseenter") {
    console.log("over");
  }
  else if (e.type == "mouseleave") {
    console.log("out");
  }
});

http://jsfiddle.net/hmUPP/2/

Answer 4

jQuery 悬停功能提供了 mouseover 和 mouseout 功能。

$(选择器).hover(inFunction,outFunction);

$(".item-image").hover(function () {
    // mouseover event codes...
}, function () {
    // mouseout event codes...
});

来源：http://www.w3schools.com/jquery/event_hover.asp

Answer 5

刚从网上冲浪，觉得我可以做出贡献。我注意到@calethebrewer 发布的上述代码可能会导致对选择器的多次调用和意外行为，例如：-

$(document).on('mouseover', '.selector', function() {
   //do something
});
$(document).on('mouseout', '.selector', function() {
   //do something
});

这个小提琴http://jsfiddle.net/TWskH/12/ 说明了我的观点。在为插件等元素制作动画时，我发现这些多个触发器会导致意外行为，这可能会导致动画或代码被调用超过必要的次数。

我的建议是简单地用 mouseenter/mouseleave 替换：-

$(document).on('mouseenter', '.selector', function() {
   //do something
});
$(document).on('mouseleave', '.selector', function() {
   //do something
});

虽然这阻止了我的动画的多个实例被调用，但我最终还是选择了 mouseover/mouseleave，因为我需要确定何时将鼠标悬停在父级的子级上。

Answer 6

您可以按照附加说明部分的说明使用.on() 和hover：

虽然强烈建议不要使用新代码，但您可能会看到 伪事件名称“悬停”用作字符串的简写 “鼠标进入鼠标离开”。它为那些附加了一个事件处理程序 两个事件，处理程序必须检查 event.type 以确定 事件是 mouseenter 还是 mouseleave。不要混淆 使用 .hover() 方法的“悬停”伪事件名称，该方法接受一个 或两个函数。

那就是执行以下操作：

$("#foo").on("hover", function(e) {

    if (e.type === "mouseenter") { console.log("enter"); }
    else if (e.type === "mouseleave") { console.log("leave"); }

});

---

编辑（jQuery 1.8+ 用户注意）：

在 jQuery 1.8 中已弃用，在 1.9 中删除：名称“hover”用作 字符串“mouseenter mouseleave”的简写。它附有一个 这两个事件的事件处理程序，并且处理程序必须检查 event.type 来确定事件是 mouseenter 还是 mouseleave。 不要将“悬停”伪事件名称与 .hover() 方法混淆， 它接受一个或两个函数。

Answer 7

$("#MyTableData").on({

 mouseenter: function(){

    //stuff to do on mouse enter
    $(this).css({'color':'red'});

},
mouseleave: function () {
    //stuff to do on mouse leave
    $(this).css({'color':'blue'});

}},'tr');

Answer 8

您可以提供一种或多种事件类型，以空格分隔。

所以hover 等于mouseenter mouseleave。

这是我的建议：

$("#foo").on("mouseenter mouseleave", function() {
    // do some stuff
});

Answer 9

如果您需要它作为其他事件的条件，我是这样解决的：

$('.classname').hover(
     function(){$(this).data('hover',true);},
     function(){$(this).data('hover',false);}
);

然后在另一个事件中，你可以轻松使用它：

 if ($(this).data('hover')){
      //...
 }

（我看到有些人使用is(':hover') 来解决这个问题。但这（还）不是一个有效的 jQuery 选择器，并且不适用于所有兼容的浏览器）

Answer 10

jQuery 插件 hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html 比这里列出的幼稚方法更进一步。虽然它们确实有效，但它们的行为不一定符合用户的期望。

使用 hoverIntent 最重要的原因是 timeout 功能。它允许您执行诸如阻止菜单关闭之类的操作，因为用户在单击所需项目之前将鼠标向右或向左拖动得稍微太远。它还提供了在弹幕中不激活悬停事件并等待焦点悬停的功能。

使用示例：

var config = {    
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
 interval: 200, // number = milliseconds for onMouseOver polling interval    
 over: makeTall, // function = onMouseOver callback (REQUIRED)    
 timeout: 500, // number = milliseconds delay before onMouseOut    
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )

可以在https://stackoverflow.com/a/1089381/37055找到更多解释