在动画期间禁用单击元素答案

【问题标题】：Disable click on an element during animation在动画期间禁用单击元素
【发布时间】：2013-10-19 15:32:22
【问题描述】：

我想阻止点击某个元素，同时它会执行一些动画，然后稍后再启用它。我尝试使用 unbind 然后绑定，但单击仍然永久禁用。还有其他方法吗？

$("something").on("click", function() {
    $("selected").unbind("click");
    $("selected").animate({...}, function() {
        $("selected").unbind("click");
    });

基本上，我不希望有人在动画正在进行时单击选定的 div，因为单击它将启动另一组我不想在两者之间开始的动画。

【问题讨论】：

标签： javascript jquery animation

【解决方案1】：

试试这个，如果动画正在发生，使用标志变量来存储信息：

var animating = false;
$("something").on("click", function () {
    animating = true;
    $("selected").animate({...
    }, 1000, function () {
        animating = false;
    });
});
$("selected").click(function(){
    if (animating) return false;
});

【讨论】：

虽然这会起作用，但它不会从选择器中删除事件处理程序，并且会降低代码的可读性。更好地使用 on() 和 off()。嗯，这只是我的看法。

【解决方案2】：

通过这种方式使用 on 和 off，您可以将函数 foo “绑定”到特定元素上的点击事件，将其关闭再打开，次数不限。玩得开心;-)

演示：http://jsfiddle.net/4yBbb/2/

var foo = function() {
// Code to handle some kind of event
};
// ... Now foo will be called when paragraphs are clicked ...
$( "p" ).on( "click", foo );
// ... Foo will no longer be called.
$( "p" ).off( "click", foo );

编辑：更新的答案，我的示例使用了委托，这不是必需的。

应用于您的示例，它看起来像这样：

$("something").on("click", function() {
    $("selected").off( "click", foo );
    $("selected").animate({...}, function() {
        $("selected").on( "click", foo );
    });

【讨论】：

【解决方案3】：

点击仍然永久禁用。

因为永远不要将"click" 再次绑定到$("something")。试试：

$("something").on("click", function animate() {
    var _this = $(this);
    _this.off("click");
    $("selected").animate({...}, function() {
        _this.on("click",animate);
    });

这里我使用命名函数，方便再次引用该函数。

【讨论】：

【解决方案4】：

如何在您的click 函数中添加一个检查以仅在单击的元素没有动画时执行动画？

$("something").on("click", function() {
    $("selected").animate({...});
});

$("selected").on("click",function(){
    if(!$(this).is("selected:animated")){
    //Start other animation
    }
});

Demo fiddle

【讨论】：

【解决方案5】：

使用 jquery 的 .on() & .off() 事件。这是示例Jquery API

您需要执行以下操作：

function flash() {
  // do your stuff here
}  
$("something").on("click", function() {
    $( "body" ).off( "click", "Your Div Selector", flash );
});
$("something").on("click", function() {
    $( "body" ).on( "click", "Your Div Selector", flash );
});

【讨论】：