防止 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行，如果您想在不浏览全部代码的情况下尝试修改它。

- user2279081

---

preventDefault是一种好的做法，因为它可以阻止锚标记中href属性所指向的位置改变！ - Neil

谢谢Neil，我想我得回去再学一些基础知识。 - user2279081

我找到原因了。请查看我的更新答案。 - Khanh TO

Answer 1

试试这样做

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

描述：

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

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

- Pank

---

您将无法再次点击。 - Jai

如果您使用 .one 方法，它会防止再次点击...... 它只会触发一次。 - Pank

但是 OP 希望在一段时间后按钮可以再次被点击。 - krishwader

正如 passionateCoder 所说，我需要在下一组单选按钮/答案选项加载后能够再次单击它。 - user2279081

使用类的概念...希望这能给你一个想法..如果(!$(this).hasClass('clicked')) { $(this).addClass('clicked'); alert("dd"); // 这被点击了一次，可以在这里执行某些操作 } - Pank

@PankajKumarJha，感谢你的帮助，我对类的概念不太自信，但无论如何都很感激你的建议。 - user2279081

Answer 2

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

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

        /* rest of code*/

     }
});

我找到了原因。您正在检查错误的元素。应该是#insideContainer。 演示

- Khanh TO

---

Khanh TO，我喜欢这个想法。但是当我尝试时它不起作用... 有什么进一步的建议吗？ - user2279081

请将您更新后的代码发布在问题中。这个解决方案必须可行。这里有一个演示。 - krishwader

@KhanhTO，感谢您提供的演示。我没有正确地使用setTimeout（函数...但现在我已经让它正常运行了。 - user2279081

@passionateCoder：感谢您提供的建议修改。但似乎并没有解决问题，我已经拒绝了它。无论如何，非常感谢您。 - Khanh TO

@KhanhTO，非常感谢！我真是太愚蠢了，竟然把我的元素标记成这样...现在可能要改变它们了。 - user2279081

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
  }


});

- Ashish Rawat

Answer 4

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

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

- Praveen

---

这如何防止点击被多次调用？这不会阻止事件冒泡吗？ - Neil

@Neil 你说得对，这样可以阻止事件冒泡到 DOM 并且保持其他处理程序不被执行。 - Praveen

@user1671639 当我更新代码时，似乎那并没有起作用。 - user2279081