Question

可能重复：
JQuery Unbind and then bind

我有一个在悬停（mouseenter，mouseleave）上执行动画的功能。我点击一个按钮后试图取消绑定该功能（因为我不希望用户与它进行交互）。这有效但我遇到的问题是再次重新绑定悬停功能，以便当用户再次单击该按钮时，动画和悬停效果将重新使用。

不确定这是否是实现此目的的正确方法，但希望我能就此主题获得一些帮助。感谢。

Answer 1

持续解除束缚和重新绑定通常不是最好的方法。它需要的工作量比需要的还多。

一种选择是在悬停时在元素上设置一个类，并让其他代码在调用时检查该类是否存在。

$('.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
});

Answer 2

以下是使用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')) {

jQuery解绑并重新绑定悬停功能

2 个答案: