jQuery解绑定和重绑定悬停函数
jQuery解绑定和重绑定悬停函数
提问于 2012-09-29 02:52:56
我有一个功能，执行动画在悬停(鼠标，鼠标)。在我点击一个按钮后，我试图解除这个函数的绑定(因为我不希望用户与它交互)。这是可行的，但我的问题是重新绑定悬停功能，以便当用户再次单击按钮时，动画和悬停效果将重新使用。
不确定这是否是实现这一目标的正确方法，但希望我能在这个问题上得到一些帮助。谢谢。
回答 2
Stack Overflow用户
发布于 2012-09-29 03:02:15
持续不绑定和重新绑定通常不是最好的方法。它需要比所需要的更多的工作。
一种选择是在悬停时在元素上设置一个类，并在调用时让其他代码检查该类是否存在。
$('.myelem')
.on("mouseenter", function() {
$(this).addClass("hovering");
})
.on("mouseleave", function() {
$(this).removeClass("hovering");
})
.on("click", function() {
if ($(this).hasClass("hovering") === false) {
// run the code
}
});一种类似的方法是添加类，但是使用事件委托方法来控制行为，从而定义选择器来处理没有"hovering"类的元素。
$('.myelem')
.on("mouseenter", function() {
$(this).addClass("hovering");
})
.on("mouseleave", function() {
$(this).removeClass("hovering");
});
$("#container").on("click", ".myelem:not(.hovering)", function() {
// run the code
});Stack Overflow用户
发布于 2012-09-29 03:27:44
下面是使用class名称来防止元素对mouseenter mouseleave作出反应的多个阻塞上下文的演示
<div class="highlight">
Hover Me
<button type="button">Stop Hoverable</button>
</div>
<div class="highlight">
Hover Me
<button type="button">Stop Hoverable</button>
</div>
<div class="highlight">
Hover Me
<button type="button">Stop Hoverable</button>
</div>
$('.highlight')
.on('mouseenter mouseleave', function(){
if (!$(this).is('canceled')) {
$(this).toggleClass('hovered');
}
})
.on('click', 'button', function(){
$(this).parent().toggleClass('canceled');
});http://jsfiddle.net/rRaPB/
这就是让它起作用的那条线：
if (!$(this).is('canceled')) {页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12649545
复制相关文章
相似问题
腾讯云开发者
