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*/
     }
});

Here是代码，因为它出现在我的应用程序的JSFiddle中

奖金问题：我被告知event.preventDefault()是一种很好的做法。这是真的？如果是这样，为什么？

更新： 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 Demo

Answer 2

试试这个

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

说明

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

使用one（）方法时，事件处理函数仅对每个元素运行ONCE。

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树。

在JQuery中防止多次点击

4 个答案: