防止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()是很好的实践。这是真的吗?如果是，为什么?

Update: JSFiddle行#，上面的代码是第81行，以防您想乱弄代码而不深入研究它。

Answer 1

var nextButton= $('<button/>', {
    text: 'Next', 
    id: 'nextButton',
    click: function (event) {
        event.preventDefault();
        if($("#insideContainer").filter(':animated').length>0) {
                  return false;
            }
        /* rest of code*/
     }
});

我发现了原因。你查错元素了。应该是#insideContainer演示

Answer 2

试一下

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

描述:

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

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

Answer 3

这样做的一种方法是使用事件的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 4

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

Desc:使其他处理程序不被执行，并防止事件冒泡到DOM树