Question

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

该项目刚刚更新为jQuery 1.7，因此我可以选择使用.on，但我似乎无法使用hover。是否可以将.on与hover一起使用？

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

Answer 1

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

将此用于未使用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()一起使用，但是：

虽然强烈建议不要使用新代码，但您可能会看到伪事件名称“悬停”用作字符串的简写 “mouseenter mouseleave”。它为那些附加一个事件处理程序两个事件，并且处理程序必须检查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() {1}}当时的代码。

编辑2012年12月11日

下面提供的一些新答案详细说明了如果.on()使用JavaScript填充div，div应如何运作。例如，假设您使用jQuery的.load()事件填充(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()

此代码适用于在{{1}}事件发生后填充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 hover函数提供mouseover和mouseout功能。

$（selector）.hover（inFunction，outFunction）;

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

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

Answer 5

您可以通过执行附加说明部分所说的内容，将.on()与hover一起使用：

虽然强烈建议不要使用新代码，但您可能会看到伪事件名称“悬停”用作字符串的简写 “mouseenter mouseleave”。它为那些附加一个事件处理程序两个事件，并且处理程序必须检查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”伪事件名称与.hover（）方法混淆，它接受一个或两个功能。

Answer 6

$("#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 7

刚从网上浏览，觉得我可以做出贡献。我注意到，使用@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 8

您可以提供由空格分隔的一个或多个事件类型。

所以hover等于mouseenter mouseleave。

这是我的热情：

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

Answer 9

对于以dinamically方式添加的元素，请参阅http://api.jquery.com/on/。我引用主要部分： 事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时页面上。如果将新HTML注入页面，则可以使用委托事件附加事件处理程序，如下所述

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。

除了能够处理尚未创建的后代元素上的事件之外，委派事件的另一个优点是，当必须监视许多元素时，它们可能会有更低的开销。在其tbody中包含1,000行的数据表中，此示例将处理程序附加到1,000个元素：

$("#dataTable tbody tr").on("mouseenter", function(event){
  alert($(this).text());
});

委托事件方法只将一个事件处理程序附加到一个元素tbody，而事件只需要冒泡一个级别（从tr到tbody）：

$("#dataTable tbody").on("mouseenter", "tr", function(event){
  alert($(this).text());
});

注意：委派事件不适用于SVG。

Answer 10

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

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

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

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

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

Answer 11

jQuery插件hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html比这里列出的天真方法更进一步。虽然它们确实有效，但它们可能不一定表现出用户的期望。

使用hoverIntent的最强大理由是超时功能。它允许您执行诸如阻止菜单关闭之类的操作，因为用户在单击他们想要的项目之前将鼠标略微向右或向左拖动。它还提供了不激活拦河坝中的悬停事件并等待集中悬停的功能。

用法示例：

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

上找到对此的进一步解释

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

11 个答案:

$（selector）.hover（inFunction，outFunction）;