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: /

<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?

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/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?

• javascript
• jquery

• Please see stackoverflow./questions/35185925/… – Thangaraja Commented Feb 3, 2016 at 20:10
• Please check my below answer. If that works then set that as answer. That will be useful to others – Thangaraja Commented Feb 5, 2016 at 21:52

5 Answers 5

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 acplish 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/nbj1s74L/

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/cthangaraja/e9e50jht/2/

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.

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

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