How to differentiate single click event and double click event?

jquery click and double click on same element
javascript double click prevent single click
javascript double click event listener
how to disable double click event in javascript
how to convert single click to double click in javascript
attach a click and double-click event to the p> element
javascript trigger double click
html table double click event

I have a single button in li with id "my_id". I attached two jQuery events with this element

1.

$("#my_id").click(function() { 
    alert('single click');
});

2.

$("#my_id").dblclick(function() {
    alert('double click');
});

But every times it gives me the single click

You need to use a timeout to check if there is an another click after the first click.

Here is the trick:

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

Usage:

$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})
<button>Click Me!</button>

EDIT:

As stated below, prefer using the native dblclick event: http://www.quirksmode.org/dom/events/click.html

Or the one provided by jQuery: http://api.jquery.com/dblclick/

Bind Different Events to Click and Double Click, Click: works as normal. You'll need to have a very slight delay on firing off the normal click action, which you cancel when the double click event  This second object is cleared by the double click event, but the first timeout object is not cleared. As a result we have double click executed once, then the first single click is executed once. As a solution, in the single click event handler, before creating timer = setTimeout(…) , I do a clearTimeout(timer). Then it works as intended.

The behavior of the dblclick event is explained at Quirksmode.

The order of events for a dblclick is:

  1. mousedown
  2. mouseup
  3. click
  4. mousedown
  5. mouseup
  6. click
  7. dblclick

The one exception to this rule is (of course) Internet Explorer with their custom order of:

  1. mousedown
  2. mouseup
  3. click
  4. mouseup
  5. dblclick

As you can see, listening to both events together on the same element will result in extra calls to your click handler.

How to handle single and double click events separately in , <span>Double click the block</span>. <script src="single-v-double.js" type="text/​javascript"></script>. </body>. </html>. single-v-double.js. A problem arises when trying to mix them: a dblclick event will actually trigger a click event as well, so you need to determine whether a single click is a "stand-alone" single click, or part of a double click.

A simple function. No jquery or other framework is required. Pass your functions as parameters

<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
    <script>
        function doubleclick(el, onsingle, ondouble) {
            if (el.getAttribute("data-dblclick") == null) {
                el.setAttribute("data-dblclick", 1);
                setTimeout(function () {
                    if (el.getAttribute("data-dblclick") == 1) {
                        onsingle();
                    }
                    el.removeAttribute("data-dblclick");
                }, 300);
            } else {
                el.removeAttribute("data-dblclick");
                ondouble();
            }
        }
    </script>

How to: Distinguish Between Clicks and Double-Clicks, One solution is to handle the double-click event and roll back the actions in the handling of the click Show("Rolled back single click change. how to differentiate single click event and double click event? (8) None of these answers satisfied my needs so I created a solution inspired by the gist posted by @AdrienSchuler. Use this solution only when you want to bind a single click AND a double click to an element.

Instead of utilizing more ad-hoc states and setTimeout, turns out there is a native property called detail that you can access from the event object!

element.onclick = event => {
   if (event.detail === 1) {
     // it was a single click
   } else if (event.detail === 2) {
     // it was a double click
   }
};

Modern browsers and even IE-9 supports it :)

Source: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

Prevent click event from firing when dblclick event fires, What is the difference between single click and double click? Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. How to differentiate single click event and double

I'm afraid that the behaviour is browser dependent:

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.

http://api.jquery.com/dblclick/

Running your code in Firefox, the alert() in the click() handler prevents you from clicking a second time. If you remove such alert, you get both events.

Adjust the double-click speed, How do you stop a single click event when double clicking? My issue was with single/double-clicking rows in a DataGrid in WPF. For some reason the ButtonDown events weren't firing, only the OnMouseLeftButtonUp event was. Anyway, I wanted to handle the single-click differently from the double-click.

ondblclick Event, is double-clicked: <p ondblclick="myFunction()">Double-click me</p> and Usage. The ondblclick event occurs when the user double-clicks on an element. If this is the case, then the only way (I can think of) you can differentiate is to 'delay' the click, waiting for double-click. If it doesn't come in certain period of time then it must be a single click. This could be unpredictable, based on the users double-click period. I'd recommend not doing so and reassessing the functionality.

Element: dblclick event, The dblclick event fires when a pointing device button (such as a mouse's primary button) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time. dblclick fires after two click events (and by extension, after two pairs of mousedown and mouseup events). When to Click. How to Click. What are the best ways to use the mouse on the computer? In most cases using a mouse is pretty easy, just start clicking. This method can however lead to disaster when things start happening that you don’t expect. This is what I term being an Uncontrollable Clicker. Click … Continue reading What’s the difference between Click and Double Click?

Double-click, Often, single-clicking selects (or highlights) an object, while a double-click executes the function associated with that object. Following a link in a web browser is  Hi, Scenario: I have a custom container which has been split into 3 sections. I have to handle the events: Double-click and single click, on all three containers. The user can click on any record, any column(I do not want to create a hotspot ), and t

Comments
  • The single click will always have to fire, it's impossible to know if a double click is going to occur unless it actually occurs within the specified double click time.
  • This is possible, check my answer. You have to wait few ms after the first click and check if there is a new click until the specified time. In that way, you are able to know if this is just a simple or a double click.
  • This might seem to work nicely in general but doesn't the lag time allowed between clicks (by which two clicks are interpreted as a double-click) differ by system configuration? It's probably safer to rely on the dblclick event
  • Yeah I think you're right, dblclick is definitively the way to go today. jQuery also handles this event: api.jquery.com/dblclick
  • @AdrienSchuler - From the doc you link: It is inadvisable to bind handlers to both the click and dblclick events for the same element. Question is about having both.
  • When event.detail is available, it is the best way to detect a double-click from the click handler. See this answer.
  • Nice solution Adrien, i need it for a case where we have a single and a double click event on one object and just one should be fired. Therefore your solution is perfect for me. I just improved it a little bit to get "this" under control: playcode.io/492022
  • not sure dblclick is even reliable... if I click once... wait a second or two, then click again, I get a dblclick event on the second click!
  • Such long clicks are useful for example for renaming files. It would be nice if there were parameter like 'longClick' to distinguish it.
  • When event.detail is available, it is the best way to detect a double-click from the click handler. See this answer.
  • I think this should be the best answer.However, I had to reduce the timeout to 200 for it to work on Windows IE8, but this value may be OS and user dependent. And also saved the timer reference to be able to cancel the execution of the click if a double click is registered.
  • Thank you for this piece of code, it works great on chrome and firefox (although chrome doesn't need this hack to work with dbl and single).