3

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?

Community
  • 1
  • 1
Sahil Sharma
  • 3,847
  • 6
  • 48
  • 98
  • Please see http://stackoverflow.com/questions/35185925/jquery-preventing-click-event-to-be-executed-in-case-of-double-or-multiple-click/35186136#35186136 – Thangaraja Feb 03 '16 at 20:10
  • Please check my below answer. If that works then set that as answer. That will be useful to others – Thangaraja Feb 05 '16 at 21:52

5 Answers5

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/

Thangaraja
  • 926
  • 6
  • 20
1

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/

Redmega
  • 673
  • 5
  • 21
  • Can you please do changes to fiddle? I am new to jQuery so i can't figure out where i need to exactly place these? – Sahil Sharma Feb 03 '16 at 19:42
  • The only problem with this is that button would be clickable only once which is not expected. I want user to click button any number of times, just ignoring cases when he double clicks or click button multiple times at the same time. – Sahil Sharma Feb 03 '16 at 19:48
  • Ok so, if he doubleclicks you want both single and double click events to occur? But if he clicks three times, only the double click should occur? I'm having trouble grasping what you're trying to do. – Redmega Feb 03 '16 at 19:51
  • If he single clicks: "click" event should occur. If he doubleClick/TripleClick and so on: No event should occur.. not even single click. – Sahil Sharma Feb 03 '16 at 19:54
  • Instead of changing the text make it so that it prints to console or pops an alert, you'll see that this won't prevent single clicks if the user double-clicks. https://jsfiddle.net/nbj1s74L/11/ – Redmega Feb 03 '16 at 19:59
  • See this question: http://stackoverflow.com/questions/1067464/need-to-cancel-click-mouseup-events-when-double-click-event-detected/1067484#1067484 – Redmega Feb 03 '16 at 20:04
  • For me it would work if i can disable click for 1sec. Example how many times user clicks within 1 second, it would be taken as 1 click only. I think this would work for that: https://jsfiddle.net/nbj1s74L/14/ – Sahil Sharma Feb 03 '16 at 20:08
  • Depending on your click speed every 4 or 5 clicks would count as only 1 click, then, in that usage of your code. If that works for you then go for it :) – Redmega Feb 03 '16 at 20:14
  • If you answered the question on your own you should close the question :) – Redmega Feb 03 '16 at 23:39
1

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.

Sahil Sharma
  • 3,847
  • 6
  • 48
  • 98
1

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);
});
Vinit Divekar
  • 774
  • 10
  • 24
0
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
});
Mike Johnson Jr
  • 776
  • 1
  • 13
  • 32