是否有可能使用jQuery .on和hover？

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

该项目只是更新到jQuery 1.7，所以我可以select使用.on ，但我似乎无法让它与hover工作。 有没有可能用hover ？

编辑 ：我绑定到的元素加载文档后加载的JavaScript。 这就是为什么我使用on而不是只是hover 。

Answer 1

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

对于未使用JavaScript填充的元素，请使用以下代码：

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

.hover()有它自己的处理程序： http : .hover()

如果你想做很多事情，就像这样在.on()处理程序中链接它们：

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

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

虽然强烈build议不要使用新代码，但可能会将伪事件名称“hover”用作string“mouseenter mouseleave”的缩写。 它为这两个事件附加一个事件处理程序，处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。 不要将“hover”伪事件名称与接受一个或两个函数的.hover（）方法混淆。

另外，使用它没有性能优势，而且比使用mouseenter或mouseleave更笨重。 我提供的答案需要较less的代码，是实现这样的事情的正确方法。

编辑

这个问题已经回答了一段时间，似乎已经获得了一些牵引力。 上面的代码仍然存在，但我确实想添加一些东西到我原来的答案。

虽然我更喜欢用.on()来使用.on()和mouseleave （帮助我理解代码中发生了什么），但它与使用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的元素。 只要改变你的参数到适当的select器。

Answer 2

在将文档加载为问题请求之后创build的对象之间进行鼠标移动时，这些解决scheme都不适用于我。 我知道这个问题很老，但我仍然有一个解决scheme：

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

这将把函数绑定到select器，以便在文档准备好之后创build这个select器的对象仍然可以调用它。

Answer 3

我不确定你的Javascript的其他部分是什么样的，所以我不能确定是否有任何干扰。 但是.hover()与.on()一起使用.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

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

您可以通过执行“附加注释”部分所述的方法使用.on()进行hover 。

虽然强烈build议不要使用新代码，但可能会将伪事件名称“hover”用作string“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”用作string“mouseenter mouseleave”的简写。 它为这两个事件附加一个事件处理程序，处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。 不要将“hover”伪事件名称与接受一个或两个函数的.hover（）方法混淆。

Answer 6

刚刚从网上冲浪，觉得我可以贡献。 我注意到，使用@calethebrewer发布的上述代码可能导致对select器和意外行为的多个调用，例如： –

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

这小提琴http://jsfiddle.net/TWskH/12/ illustraits我的观点。 当在插件中设置animation元素时，我发现这些多个触发器会导致意想不到的行为，从而导致animation或代码被调用的次数超过了必要的次数。

我的build议是简单地用mouseenter / mouseleavereplace：

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

虽然这阻止了我的animation的多个实例被调用，但是我最终还是使用了mouseover / mouseleave来确定父母的孩子什么时候被closures。

Answer 7

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

委托事件的优点是，他们可以处理后来添加到文档中的后代元素的事件。 通过select在委托事件处理程序附加时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序。

除了处理尚未创build的后代元素上的事件的能力之外，委托事件的另一个优点是当必须监视许多元素时，其潜在的开销要低得多。 在tbody中有1000行的数据表上，这个例子将一个处理程序附加到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 8

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

所以hover等于mouseenter mouseleave 。

这是我的霸权：

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

Answer 9

jQueryhoverfunction给鼠标和鼠标function。

$（select器）.hover（inFunction，outFunction）;

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

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

Answer 10

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

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

那么在另一个事件中，你可以很容易地使用它：

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

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

Answer 11

jQuery插件hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html比这里列出的天真的方法更进一步。; 虽然他们肯定工作，但他们可能不一定performance出用户的期望。

使用hoverIntent的最强有力的原因是超时function。 它允许你做一些事情，比如阻止菜单closures，因为用户在点击他们想要的项目之前，将鼠标拖得太离左右很远。 它还提供了在激stream中不激活hover事件并等待hover的function。

用法示例：

 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/37055find