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

Question

I have some code in which I want to stop user from clicking a button multiple times. I have tried multiple things including disabling button on click and enabling it at the end but nothing is working perfectly.

I want to stop "click" event of jQuery (single click) from being executed in case user has clicked on it two or more times.

This is my js fiddle: 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')
});

If i try double clicking, the behavior is: Single click gets executed first => Then double click gets executed.

I want to prevent single click event to be executed in case user clicks on button multiple times. Suggestions?

Answer 1

This is bit tricky. You need to calculate the time taken for double click and trigger events. Try the below code

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

});

Demo : https://jsfiddle.net/cthangaraja/e9e50jht/2/

Answer 2

According to the jquery documentation:

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

That being said, you can accomplish what you want by using $('#main').addClass('clicked-once'); and testing for the existence of that class before executing the code inside the single click handler.

$("#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

I found the answer for this.

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

Its working for me. The set timeout for 500ms doesn't allow code to be re-entrant which is working fine for me at various network/device speeds.

Answer 4

Slight change in the answer given by maverick .

In the set timeout method, reference of this is changed. Hence the code should be changed to:

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

Record the number of clicks to use for your functions, example:

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

If you need it reset just put a timeout in the .click()

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

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