是否可以使用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(),但是:

虽然强烈建议不要使用新代码,但您可能会看到伪事件名称"悬停"用作字符串"mouseenter mouseleave"的简写.它为这两个事件附加单个事件处理程序,并且处理程序必须检查event.type以确定事件是mouseenter还是mouseleave.不要将"hover"伪事件名称与.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日

下面提供的一些新答案详细说明了.on()如果div使用JavaScript填充问题,应该如何工作.例如,假设您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()事件发生后,此代码适用于填充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(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"伪事件名称与.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

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

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

这个小提琴http://jsfiddle.net/TWskH/12/ illustrait代表了我的观点。当对诸如插件中的元素进行动画处理时，我发现这些多个触发器会导致意外的行为，这可能导致动画或代码被调用的次数超过了必要。

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

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

尽管这阻止了我动画的多个实例被调用，但最终我还是决定使用鼠标悬停/ mouseleave来确定何时将父级的孩子悬停在上面。

Answer 7

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

所以hover等于mouseenter mouseleave.

这是我的建议：

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

Answer 8

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