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

jQuery preventing click event to be executed in case of double or multiple clicks by user

本文关键字：情况下 事件 执行 双击 用户 jQuery      更新时间：2023-09-26

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

我想停止执行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')
});

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

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

根据 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/

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

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

我找到了答案。

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

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

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

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

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

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
});
相关文章：