Question

我希望在切换动画显示时禁用点击处理程序，这样动画就不会因多次快速点击而累积。感谢

jquery脚本：

$("#button").click({
    $(this).unbind('click').next().toggle("slow",function(){$('#button').bind('click')});
});

html代码

<div
   <a href='#' id='button'>Toggle</a>
   <div>
    test
   </div>
</div>

Answer 1

首先，您附加事件的方式已被破坏。我不知道在你的代码中提出问题或真正的错误是否只是匆忙，但这是设置处理程序的正确方法：

$("#button").click(function(evt) { // <- you need to pass it a function!
    $(this).unbind('click').next()
       .toggle("slow",function(){$('#button').bind('click')});
});

但是你的问题。我认为您将从使用jQuery's one function中受益。一旦调用了单击处理程序，就会将其作为单击处理程序删除;因此，它只执行一次，一次点击。要在动画后重新点击点击处理程序，我认为你做对了;动画结束后重新绑定它。

function clickHandler(evt) {
    $(this).next().toggle("slow",
        function() {
            $('#button').bind('click', clickHandler);
        });
}

$("#button").one('click', clickHandler);

如果使用one对你来说太慢了，最快的方法就是在锚点的href上添加javascript。但是当你准备再次执行时，你需要切换一个全局布尔变量。

<a href="javascript:clickHandler(); return false;">...</a>

function clickHandler() {
    if( someBoolean ) {
        someBoolean = false;
        //do stuff
    }
    someBoolean = true;
}

Answer 2

如前所述，事件附件的实现已被破坏。最重要的是，jQuery中有一个名为.stop的方法，它使您无需使用bind / unbind。

$("#button").click(function(){
    $(this).next().stop().toggle("slow");
});

它只是清除动画队列并停止当前动画，让你启动下一个动画。

Stop function on jQuery docs.请注意，它有两个属性 - clearQueue和goToEnd。阅读更多有关使用此方法的更多信息。

Answer 3

第一种方法

在切换动画时放弃事件点击次数：

$("#button").click(function(e) {

    e.stopPropagation();

    if ( $(this).next().is(':animated') ) {
        return false;
    }

    $(this).next().toggle("slow");
});

See Demo

第二种方法

设置时间延迟以确保仅触发最新点击：

var timeID;

$("#button").click(function(e) {

    var $el = $(this);

    clearTimeout(timeID);

    timeID = setTimeout(function() {
        $el.next().toggle("slow");
    }, 250);    

});

See Demo

Answer 4

您可以从stop()方法获得一些好处，而不是忽略后续点击。有关示例，请参阅Quick Tip: Prevent Animation Queue Buildup。他正在谈论hover，但它适用于您可能在同一事件中一个接一个地运行动画的任何地方。

或者，您可以disable按钮，而不是删除整个点击处理程序吗？它可能表达了“不要再次点击我”的意图，而不是放弃点击。

Answer 5

jquery的切换方法存在问题，当用户快速点击切换元素时，有时会给出错误的结果。它由于点击事件的时间秒而发生，当第一个事件未完全完成时，第二个事件触发器会产生问题。解决这个问题有点棘手，但在settimeout函数的帮助下很容易：

＆＃13;

    $('.navbar-toggle').on('click', function() {
    $('.mob-logo').toggle();
    $('.navbar-toggle').css('pointer-events', 'none');

    setTimeout(function() {
    // enable click after 0.5second
    $('.navbar-toggle').css('pointer-events', 'all');
    }, 500); // 1 second delay
    });

＆＃13;

如何使用jquery中的切换来防止点击队列的建立？尝试使用bind / unbind（'click'）

5 个答案:

第一种方法

第二种方法