CODEWITHSUNDEEP
javascriptjquery
Sahil Sharma
Sahil Sharma

Reputation: 4217

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

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?

Upvotes: 3

Views: 5485

Answers (5)

Vinit Divekar
Vinit Divekar

Reputation: 918

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

Upvotes: 1

Sahil Sharma
Sahil Sharma

Reputation: 4217

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.

Upvotes: 1

Thangaraja
Thangaraja

Reputation: 956

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/

Upvotes: 1

Mike Johnson Jr
Mike Johnson Jr

Reputation: 796

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

Upvotes: 0

Redmega
Redmega

Reputation: 683

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/

Upvotes: 1

Related Questions