Question

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

我想停止＆＃34;点击＆＃34; jQuery（单击）事件，以防用户点击两次或多次。

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

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

我希望防止在用户多次点击按钮时执行单击事件。建议？

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事件。触发的事件序列因浏览器而异，其中一些事件在click之前接收到两个dblclick事件，而其他事件仅在一个事件中接收。双击灵敏度（双击检测到的点击之间的最长时间）可能因操作系统和浏览器而异，并且通常可由用户配置。

话虽如此，您可以使用$('#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

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

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

5 个答案: