jQuery防止在用户双击或多次单击的情况下执行单击事件

Question

我有一些代码要阻止用户多次单击按钮。我尝试了多种方法，包括在点击时禁用按钮并在最后启用它，但没有任何东西可以完美运行。

如果用户点击了两次或更多次，我想停止执行 jQuery（单击）的“单击”事件。

这是我的 js 小提琴：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')
});

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

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

Answer 1

根据 jquery 文档：

不建议将处理程序绑定到同一元素的click 和dblclick 事件。触发的事件顺序因浏览器而异，一些浏览器在dblclick 之前接收两个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/

Answer 2

这有点棘手。您需要计算双击和触发事件所花费的时间。试试下面的代码

$(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/

Answer 3

我找到了答案。

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

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

Answer 4

maverick给出的答案略有变化。

在设置超时方法中，this 的引用发生了变化。因此代码应改为：

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

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