javascript - 防止 JQuery 中的多次点击

Question

我正在创建一个动态测验，我需要防止多次点击我的“下一步”按钮。在点击功能中，我尝试了一个if条件来防止多次点击。不知道为什么它不起作用。非常感谢一些帮助。

var nextButton= $('<button/>', {
    text: 'Next', 
    id: 'nextButton',
    click: function (event) {
        event.preventDefault();

        if($("#container").filter(':animated').length>0) {
                  return false;
            }

        /* rest of code*/
     }
});

这是我的应用程序的 JSFiddle 出现的代码

奖励问题：有人告诉我这event.preventDefault()是很好的做法。这是真的？如果是这样，为什么？

更新： JSFiddle 行 #上面的代码是第 81 行，以防你想在不深入研究的情况下弄乱代码。

Answer 1

一种方法是使用这样timeStamp的事件属性在多次点击之间间隔一段时间：

var a = $("a"),
    stopClick = 0;


a.on("click", function(e) {
  if(e.timeStamp - stopClick > 300) { // give 300ms gap between clicks
     // logic here

    stopClick = e.timeStamp; // new timestamp given
  }


});

Answer 2

像这样试试

$("#id or .class").one("click",function(){
  // your activity
});

描述：

one() 方法为所选元素附加一个或多个事件处理程序，并指定事件发生时要运行的函数。

使用 one() 方法时，事件处理函数仅对每个元素运行一次。

Answer 3

var nextButton= $('<button/>', {
    text: 'Next', 
    id: 'nextButton',
    click: function (event) {
        event.preventDefault();

        if($("#insideContainer").filter(':animated').length>0) {
                  return false;
            }

        /* rest of code*/

     }
});

我发现了原因。您正在检查错误的元素。应该是#insideContainer Demo

Answer 4

尝试使用event.stopImmediatePropagation()以防止多次点击。

描述：阻止其余的处理程序被执行，并防止事件在 DOM 树上冒泡。