在动画过程中禁用对元素的单击

Disable click on an element during animation

本文关键字：元素 单击 动画 过程中      更新时间：2023-09-26

我想阻止在元素执行某些动画时单击该元素，然后再启用它。我尝试使用取消绑定然后绑定，但单击仍然永久禁用。还有其他方法可以做到吗？

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

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

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

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

以这种方式打开和关闭，您可以将函数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 );
    });

单击将保持永久禁用状态。

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

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

在这里，我使用命名函数来简化再次引用该函数。

如何在click函数中添加一个检查，以便仅在单击的元素未进行动画时执行动画？

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

演示小提琴

使用 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 );
});
相关文章：