Having some issues with double click events in JavaScript.

I want to be able to click on an element in fast succession but listen for double clicks. Is this technically possible or do I need to have a single click and listen for when it's been clicked twice?

A codepen example here.

The JS can be found below too.

(function() {

  var el;
  var count = 0;
  var counter;

  function init() {
    el = document.getElementById('click-me');
    counter = document.getElementById('counter');

    el.addEventListener('dblclick', onDblClick, false);
  }

  function onDblClick(e) {
    count++;
    counter.textContent = count;
  }

  init();

}());

It seems that after double clicking on something, you need to leave a short pause to allow it to reset the event, maybe a second or half a second?

Is there something I'm missing with the dblclick event itself or is what I'm trying to do not possible?

P.S. This only needs to work in Webkit/Chrome as this isn't for a website, but an overlay for a game.

Having some issues with double click events in JavaScript.

I want to be able to click on an element in fast succession but listen for double clicks. Is this technically possible or do I need to have a single click and listen for when it's been clicked twice?

A codepen example here.

The JS can be found below too.

(function() {

  var el;
  var count = 0;
  var counter;

  function init() {
    el = document.getElementById('click-me');
    counter = document.getElementById('counter');

    el.addEventListener('dblclick', onDblClick, false);
  }

  function onDblClick(e) {
    count++;
    counter.textContent = count;
  }

  init();

}());

It seems that after double clicking on something, you need to leave a short pause to allow it to reset the event, maybe a second or half a second?

Is there something I'm missing with the dblclick event itself or is what I'm trying to do not possible?

P.S. This only needs to work in Webkit/Chrome as this isn't for a website, but an overlay for a game.

• javascript
• event-listener
• double-click

Share Improve this question Follow edited Oct 19, 2017 at 15:40 Huangism 16.4k77 gold badges5050 silver badges7575 bronze badges asked Oct 19, 2017 at 15:26 ChronixPsycChronixPsyc 47611 gold badge1010 silver badges2222 bronze badges 5

• I can rage-click your codepen and it keeps incrementing fine. Is your problem in a particular browser / device / input method? – Fenton Commented Oct 19, 2017 at 15:29
• @Fenton While it works, it sometimes fails for me (takes 3 double clicks), running on Chrome 61. – Adrian Commented Oct 19, 2017 at 15:31
• So looks like it works in Edge, IE, and Firefox. I only really need this to work in Chrome/Webkit as this isn't specifically for a website. I'll update my question. – ChronixPsyc Commented Oct 19, 2017 at 15:33
• @ChronixPsyc According to MDN dblclick on Chrome only works "[1] Only works for <textarea> elements and some <input> element types." Ref – Adrian Commented Oct 19, 2017 at 15:38
• Looks like a pause is required between double clicks. If you click too many times in a row, it would only work once. Kind of make sense though, if I clicked 4 times in a row then it's a quadruple click even though double click triggers since there is no such thing as quadruple or triple click – Huangism Commented Oct 19, 2017 at 15:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Something like this (https://gist.github./karbassi/639453):

(function() {

  var el;
  var count = 0;
  var counter;
  var clickCount = 0;

  function init() {
    el = document.getElementById('click-me');
    counter = document.getElementById('counter');

    el.addEventListener('click', onDblClick, false);
  }

  function onDblClick(e) {

    clickCount++;
    if (clickCount === 1) {
        singleClickTimer = setTimeout(function() {
            clickCount = 0;            
        }, 400);
    } else if (clickCount === 2) {
        count++;
        clearTimeout(singleClickTimer);
        clickCount = 0;
        counter.textContent = count;
    }
}
  init();

}());