jQuery防止用户双击或多次点击时执行单击事件

Question

我有一些代码，我想防止用户多次点击一个按钮。我尝试了很多方法，包括在单击时禁用按钮并在最后启用它，但没有完美的解决方案。

我想在用户点击两次或更多次时停止执行jQuery（单击）的“click”事件。

这是我的jsfiddle链接：https://jsfiddle.net/tm5xvtc1/6/

<p id="clickable">Click on this paragraph.</p>
<p id="main">
I will change on clicking
</p>

$("#clickable").click(function(){
    $('#main').text('Single click');
});

$("#clickable").dblclick(function(){
    $('#main').text('Double click')
});

如果我尝试双击，则行为如下： 首先执行单击事件 => 然后执行双击事件。

我想防止在用户多次点击按钮的情况下执行单击事件。有什么建议吗？

- Sahil Sharma

---

请查看https://dev59.com/CJPfa4cB1Zd3GeqPG7dk#35186136。 - Thangaraja

请检查我的下面的答案。如果可以工作，请将其设置为答案。这对其他人会很有用。 - Thangaraja

Answer 1

这有点棘手。您需要计算双击所需的时间并触发事件。请尝试以下代码。

$(function() {

  var clicks = 0;
  var timer = null;

  $("#clickable").on("click", function(e) {
      clicks++; // Increment click counter
      if (clicks === 1) {
        timer = setTimeout(function() {
          $('#main').text('Single click');
          clicks = 0; //Reset
        }, 800); // Increase or decrease if there is slowness or speed
      } else {
        clearTimeout(timer); //prevent single-click action
        $('#main').text('Double click')
        clicks = 0; // Reset
      }
    });

    $("#clickable").on("dblclick", function(e) {
      e.preventDefault(); //Prevent double click
    });

});

示例: https://jsfiddle.net/cthangaraja/e9e50jht/2/

- Thangaraja

Answer 2

根据jQuery文档：

不建议为同一元素绑定click和dblclick事件处理程序。触发的事件序列因浏览器而异，有些浏览器在dblclick之前接收到两个click事件，而其他浏览器只接收到一个click事件。双击灵敏度（被检测为双击的点击之间的最大时间）可以因操作系统和浏览器而异，并且通常是用户可配置的。

话虽如此，您可以通过使用$('#main').addClass('clicked-once');并在单击处理程序内部执行代码之前测试该类的存在来实现您想要的效果。

$("#clickable").click(function(){
    if($(this).hasClass('clicked-once')){
        return false;
    } else {
        $(this).addClass('clicked-once');
        $('#main').text('Single click');
   }
});

$("#clickable").dblclick(function(){
    $('#main').text('Double click')
});

jsfiddle: https://jsfiddle.net/nbj1s74L/

在这里可以找到一个名为“jsfiddle”的网站，链接为https://jsfiddle.net/nbj1s74L/。

- Redmega

---

你能否修改这个fiddle？我对jQuery很新，所以无法确定我需要把它们放在哪里？ - Sahil Sharma

唯一的问题是按钮只能被点击一次，这不是我们期望的。我希望用户可以点击按钮任意次数，只需忽略双击或同时多次点击按钮的情况。 - Sahil Sharma

如果他单击：“click”事件应该发生。 如果他双击/三击等等：不应该发生任何事件..甚至没有单击。 - Sahil Sharma

不要改变文本，而是将其打印到控制台或弹出警告窗口，这样如果用户双击，就不会阻止单击。https://jsfiddle.net/nbj1s74L/11/ - Redmega

根据您的点击速度，每4或5次点击将仅计为1次点击，然后在您的代码使用中。如果这对您有用，请继续使用 :) - Redmega

Answer 3

我找到了这个问题的答案。

$(document).on('click', '#clickable', function () {
    $(this).prop('disabled', true);
    //LOGIC
    setTimeout(function () { $(this).prop('disabled', false); }, 500);
});

对我来说它有效。设置 500 毫秒的超时时间不允许代码可重入，这在各种网络/设备速度下都可以正常工作。

- Sahil Sharma

Answer 4

maverick 给出的回答略有变化。

在设置超时方法中，this 的引用已更改。因此，代码应更改为：

$(document).on('click', '#clickable', function () {
    var self = this;
    $(this).prop('disabled', true);
    //LOGIC
    setTimeout(function () { $(self).prop('disabled', false); }, 500);
});

- Vinit Divekar

---

意识到有些不对劲了。没有那个，按钮永远不会重新启用。很好的发现。 - Bryan Hobbs

Answer 5

window.numOfClicks = 0

$("#clickable").click(function(){
    window.numOfClicks += 1;
    //rest of code
});

记录您的函数使用次数，例如：

if (window.numOfClicks > 1){ //do this}

如果您需要重置它，只需在 .click() 中设置一个超时即可。

var resetClicks = function(){ window.numOfClicks = 0 }

$("#clickable").click(function(){
    //your other code
    setTimeout(resetClicks,5000); //reset every 5 seconds
});

- Mike Johnson Jr