Jquery links double click and one click separately

Question

Is there anything in jquery that would allow me to distinguish between double-click and one-click behavior?

When I link both with the same element, only one click is performed.

Is there a way that waits some time before performing one click to find out if the user clicks again or not?

Thank:)

Answer 1

I found that John Strickler's answer didn’t quite do what I expected. As soon as a warning is triggered by a second click in a two-second window, each subsequent click triggers another warning until you wait two seconds before clicking again. So with John's code, a triple click acts like two double clicks, where I expect it to act like a double click, followed by a single click.

I reworked his decision to function in this way and flow in such a way that the mind could better understand. I delayed the delay from 2000 to 700 to better mimic what I would feel as normal sensitivity. Here's the fiddle: http://jsfiddle.net/KpCwN/4/ .

Thanks for the creation, John. I hope this alternate version is useful to others.

var DELAY = 700, clicks = 0, timer = null; $(function(){ $("a").on("click", function(e){ clicks++; //count clicks if(clicks === 1) { timer = setTimeout(function() { alert("Single Click"); //perform single-click action clicks = 0; //after action performed, reset counter }, DELAY); } else { clearTimeout(timer); //prevent single-click action alert("Double Click"); //perform double-click action clicks = 0; //after action performed, reset counter } }) .on("dblclick", function(e){ e.preventDefault(); //cancel system double-click event }); }); 

Answer 2

Of course, attach two handlers, one to click , and the other to dblclick . Create a variable that increments with each click. then reset after a set delay. Inside the setTimeout function, you can do something ...

 var DELAY = 2000, clicks = 0, timer = null; $('a').bind({ click: function(e) { clearTimeout(timer); timer = setTimeout(function() { clicks = 0; }, DELAY); if(clicks === 1) { alert(clicks); //do something here clicks = 0; } //Increment clicks clicks++; }, dblclick: function(e) { e.preventDefault(); //don't do anything } }); 

Answer 3

The solution mentioned in Nott Responding seems to work for both events, and for clicks and dblclick on double-click. However, I think this is pointing in the right direction.

I made a small change, this is the result:

 $("#clickMe").click(function (e) { var $this = $(this); if ($this.hasClass('clicked')){ $this.removeClass('clicked'); alert("Double click"); //here is your code for double click }else{ $this.addClass('clicked'); setTimeout(function() { if ($this.hasClass('clicked')){ $this.removeClass('clicked'); alert("Just one click!"); //your code for single click } }, 500); } 

});

Try

http://jsfiddle.net/calterras/xmmo3esg/

Answer 4

You could probably write your own custom click / dblclick implementation to wait for an extra click. I do not see anything in the main jQuery functions that will help you with this.

Quote from . dblclick () on jQuery

It is not recommended to attach handlers to click and dblclick events for the same element. The sequence of triggered events varies from browser to browser, some of which receive two click events before dblclick, while others receive only one. Double-click sensitivity (the maximum time between clicks, which is defined as double-clicking) can vary depending on the operating system and browser and is often user-configurable.

Answer 5

Look at the following code

 $("#clickMe").click(function (e) { var $this = $(this); if ($this.hasClass('clicked')){ alert("Double click"); //here is your code for double click return; }else{ $this.addClass('clicked'); //your code for single click setTimeout(function() { $this.removeClass('clicked'); },500); }//end of else }); 

Demo here http://jsfiddle.net/cB484/

Answer 6

I wrote a jQuery plugin that also allows delegate click and dblclick events

 // jQuery plugin to bind both single and double click to objects // parameter 'delegateSelector' is optional and allow to delegate the events // parameter 'dblclickWait' is optional default is 300 (function($) { $.fn.multipleClicks = function(delegateSelector, clickFun, dblclickFun, dblclickWait) { var obj; if (typeof(delegateSelector)==='function' && typeof(clickFun)==='function') { dblclickWait = dblclickFun; dblclickFun = clickFun; clickFun = delegateSelector; delegateSelector = null; // If 'delegateSelector' is missing reorder arguments } else if (!(typeof(delegateSelector)==='string' && typeof(clickFun)==='function' && typeof(dblclickFun)==='function')) { return false; } return $(this).each(function() { $(this).on('click', delegateSelector, function(event) { var self = this; clicks = ($(self).data('clicks') || 0)+1; $(self).data('clicks', clicks); if (clicks == 1) { setTimeout(function(){ if ($(self).data('clicks') == 1) { clickFun.call(self, event); // Single click action } else { dblclickFun.call(self, event); // Double click action } $(self).data('clicks', 0); }, dblclickWait || 300); } }); }); }; })(jQuery); 

Answer 7

This solution works for me.

 var DELAY = 250, clicks = 0, timer = null; $(".fc-event").click(function(e) { if (timer == null) { timer = setTimeout(function() { clicks = 0; timer = null; // single click code }, DELAY); } if(clicks === 1) { clearTimeout(timer); timer = null; clicks = -1; // double click code } clicks++; }); 

Answer 8

I am implementing this simple solution, http://jsfiddle.net/533135/VHkLR/5/
html code

 <p>Click on this paragraph.</p> <b> </b> 

script code

 var dbclick=false; $("p").click(function(){ setTimeout(function(){ if(dbclick ==false){ $("b").html("clicked") } },200) }).dblclick(function(){ dbclick = true $("b").html("dbclicked") setTimeout(function(){ dbclick = false },300) }); 

its a little laggy

Answer 9

 var singleClickTimer = 0; //define a var to hold timer event in parent scope jqueryElem.click(function(e){ //using jquery click handler if (e.detail == 1) { //ensure this is the first click singleClickTimer = setTimeout(function(){ //create a timer alert('single'); //run your single click code },250); //250 or 1/4th second is about right } }); jqueryElem.dblclick(function(e){ //using jquery dblclick handler clearTimeout(singleClickTimer); //cancel the single click alert('double'); //run your double click code }); 

Answer 10

I made some changes to the answers above that still work fine: http://jsfiddle.net/arondraper/R8cDR/

Answer 11

 (function($){ $.click2 = function (elm, o){ this.ao = o; var DELAY = 700, clicks = 0; var timer = null; var self = this; $(elm).on('click', function(e){ clicks++; if(clicks === 1){ timer = setTimeout(function(){ self.ao.click(e); }, DELAY); } else { clearTimeout(timer); self.ao.dblclick(e); } }).on('dblclick', function(e){ e.preventDefault(); }); }; $.click2.defaults = { click: function(e){}, dblclick: function(e){} }; $.fn.click2 = function(o){ o = $.extend({},$.click2.defaults, o); this.each(function(){ new $.click2(this, o); }); return this; }; })(jQuery); 

And finally, we use how.

 $("a").click2({ click : function(e){ var cid = $(this).data('cid'); console.log("Click : "+cid); }, dblclick : function(e){ var cid = $(this).data('cid'); console.log("Double Click : "+cid); } }); 

Answer 12

Same as above, but allows triple click. (Delay 500) http://jsfiddle.net/luenwarneke/rV78Y/1/

  var DELAY = 500, clicks = 0, timer = null; $(document).ready(function() { $("a") .on("click", function(e){ clicks++; //count clicks timer = setTimeout(function() { if(clicks === 1) { alert('Single Click'); //perform single-click action } else if(clicks === 2) { alert('Double Click'); //perform single-click action } else if(clicks >= 3) { alert('Triple Click'); //perform Triple-click action } clearTimeout(timer); clicks = 0; //after action performed, reset counter }, DELAY); }) .on("dblclick", function(e){ e.preventDefault(); //cancel system double-click event }); }); 

Answer 13

This is a method you can do using basic JavaScript that works for me:

 var v_Result; function OneClick() { v_Result = false; window.setTimeout(OneClick_Nei, 500) function OneClick_Nei() { if (v_Result != false) return; alert("single click"); } } function TwoClick() { v_Result = true; alert("double click"); } 

Answer 14

Below is my simple approach to the problem.

JQuery function:

 jQuery.fn.trackClicks = function () { if ($(this).attr("data-clicks") === undefined) $(this).attr("data-clicks", 0); var timer; $(this).click(function () { $(this).attr("data-clicks", parseInt($(this).attr("data-clicks")) + 1); if (timer) clearTimeout(timer); var item = $(this); timer = setTimeout(function() { item.attr("data-clicks", 0); }, 1000); }); } 

Implementation:

 $(function () { $("a").trackClicks(); $("a").click(function () { if ($(this).attr("data-clicks") === "2") { // Double clicked } }); }); 

Examine the clicked item in the Firefox / Chrome browser to see how the clicks on the click move up and down as you click, adjust the time (1000) to fit.