1

我想在显示切换动画时禁用点击处理程序，这样动画就不会因为多次快速点击而建立。谢谢

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>
4

5 回答 5

2

第一种方法

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

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

    e.stopPropagation();

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

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

看演示

第二种方法

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

var timeID;

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

    var $el = $(this);

    clearTimeout(timeID);

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

});

看演示

于 2015-04-03T19:56:19.330 回答
2

如前所述，您的事件附件实现已损坏。最重要的是，jQuery 中有一个名为 .stop 的方法，它可以让您不必使用绑定/取消绑定。

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

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

jQuery 文档上的停止功能。请注意，它有两个属性 - clearQueue 和 goToEnd。阅读更多关于更稳健地使用此方法的信息。

于 2009-09-22T12:42:08.847 回答
2

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

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

但是到你的问题上。我认为你会从使用jQuery 的onefunction中受益。一旦点击处理程序被调用，它就会作为点击处理程序被移除；因此，它只执行一次，单击一次。要在动画之后重新打开点击处理程序，我认为你做对了；动画结束后重新绑定。

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;
}
于 2009-09-22T12:29:44.940 回答
1

stop()您可能会从该方法中获得一些好处，而不是忽略随后的点击。有关示例，请参阅快速提示：防止动画队列堆积。他说的是hover，但它适用于您可能在同一事件中一个接一个地运行动画的任何地方。

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

于 2009-09-22T12:42:04.930 回答
0

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

    $('.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
    });

于 2017-07-01T09:38:39.753 回答