javascript - jQuery取消绑定和重新绑定悬停功能

Question

可能重复：
JQuery Unbind 然后绑定

我有一个在悬停时执行动画的函数（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')) {