javascript - 在动画期间禁用单击元素

Question

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

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

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

Answer 1

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

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

Answer 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 );
    });

Answer 3

使用 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 );
});

Answer 4

单击仍然永久禁用。

因为当永远不会将"click"再次绑定到$("something"). 尝试：

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

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

Answer 5

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

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

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

演示小提琴