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

Question

我有一些代码，我希望阻止用户多次单击按钮。 我已经尝试了多种功能，包括在点击时禁用按钮并在最后启用它，但没有任何工作完美。

我希望停止执行jQuery（单击）的“click”事件，以防用户点击它两次或更多次。

这是我的小提琴： 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

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

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

根据jquery文档：

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

话虽这么说，你可以通过使用$('#main').addClass('clicked-once');来实现你想要的$('#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 3

我找到了答案。

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

它为我工作。 500ms的设置超时不允许代码重入，这对于我在各种网络/设备速度下工作正常。

Answer 4

特立独行给出的答案略有变化。

在set timeout方法中，更改了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
});