结合jquery函数 - on（）hover/mouseenter/mouseleave

我有一系列元素（让我们称它们为'.my-elements'） - 一些文档已经准备就绪，而另一些则通过分页脚本加载。结合jquery函数 - on（）hover/mouseenter/mouseleave

我想根据鼠标是否在这些元素上设置一个变量。下面的代码工作，但我怀疑有更好的办法......我可以这样做，所以我只需要引用DOM一次？

$(document).on('mouseenter','.my-elements', function(){ 
    mouse_is_inside = true; 
}); 

$(document).on('mouseleave','.my-elements', function(){ 
    mouse_is_inside = false; 
});

谢谢！

来源

2012-03-21 Nicole Harris

您可以绑定到两者一起，检查event.type ：

$(document).on('mouseenter mouseleave', '.my-elements', function (ev) { 
    mouse_is_inside = ev.type === 'mouseenter'; 
});

或者，如果你想要让他们分开，.on有另一种语法接受一个事件映射：

$(document).on({ 
    mouseenter: function() { 
     mouse_is_inside = true; 
    }, 

    mouseleave: function() { 
     mouse_is_inside = false; 
    } 
}, '.my-elements');

来源

2012-03-21 20:15:37

+1为事件类型的想法。 – worenga 2012-03-21 20:20:58

感谢乔纳森 - 解决方案1对我来说是最好的！ – 2012-03-21 20:28:26

正是我在找的，谢谢乔纳森。 – jffgrdnr 2012-11-02 19:52:39

退房jQuery hover这是一样的：

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

更新：我刚刚意识到，需要通过（）方法来持久化事件。在这种情况下，你可以使用一个事件映射，像这样：

.on({ 
    mouseenter: function() { 
     console.log('enter'); 
    }, 
    mouseleave: function() { 
     console.log('bye!'); 
    } 
})

来源

2012-03-21 20:10:48

您也可以尝试：

$(".my-elements").hover(function(eIn) { 
    // do work for mouse over 
}, 
function(eOut) { 
    // do work for mouse out 
});

更新和修正

意识到你需要更多的动态密码锁哪种情况Jonathan Lonowski或Derek Hunziker's是完美的

来源

2012-03-21 20:13:18 SpYk3HH

这不适用于动态创建的元素。 **报价OP：** _“...一些文件准备就绪，而其他人稍后加载......”_ – Sparky 2012-03-21 20:17:38

几乎所有的jQuery方法ret瓮对象，所以你可以把它们结合在一起：

$(document).on('mouseenter','.my-elements', function(){ 
    mouse_is_inside = true; 
}).on('mouseleave','.my-elements', function(){ 
    mouse_is_inside = false; 
});

来源

2012-03-21 20:13:45

演示 - > http://jsfiddle.net/skram/qsmfb/ – 2012-03-21 20:16:13

警告字，由于它不可链接，所以这不适用于现场。 – jbabey 2012-03-21 20:27:31

$('.my-elements').on('mouseenter mouseleave', function(event){ 
    mouse_is_inside = event.type === 'mouseenter'; 
});

但它通常不是一个好主意，有一个全局变量incidating一个事件状态

来源

2012-03-21 20:14:35 worenga

将全局变量设置为事件状态指示器有哪些问题？ – 2012-03-21 20:48:23

对于初学者，您可以选择您的元素而不是文档。

$('.my-elements').on('mouseenter', function(){ 
    mouse_is_inside = true; 
});

你可以尝试的快捷符号这样的...

$('.my-elements').on('mouseenter mouseleave', function(){ 
    mouse_is_inside = !mouse_is_inside; 
});

这会在每次鼠标进入或退出时，应保持mouse_is_inside变量设置为正确的价值否定值。

来源

2012-03-21 20:16:16

结合jquery函数 - on（）hover/mouseenter/mouseleave

回答

相关问题