how to check the click is single or double in javascript

Question

I am trying to check whether a click on an element is a single click or a double click.

I am trying with this code.

var clk_ch = document.getElementById('clk');

function singleClick() {
    alert("single click");
}

function doubleClick() {
    alert("double click");
}

var clickCount = 0;

clk_ch.addEventListener('click', function() {
    alert();
    clickCount++;
    if (clickCount === 1) {
        singleClickTimer = setTimeout(function() {
            clickCount = 0;
            singleClick();
        }, 400);
    } else if (clickCount === 2) {
        clearTimeout(singleClickTimer);
        clickCount = 0;
        doubleClick();
    }
}, false);

I am not getting any alert. Where am I going wrong? clk is the id of the clicked element

<input type="image" src="button.gif" id="clk" >

possible duplicate of [how to differentiate single click event and double click event?](http://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event) — Rohit Arora, Jul 08 '15 at 07:35
This might help. It has a fiddle http://stackoverflow.com/a/7845282/2270492, FIDDLE:http://jsfiddle.net/KpCwN/4/ — Hemal, Jul 08 '15 at 07:49
@stevenw00 the issue which was being discussed there is still replicated here. According to me it is duplicate and will result in the same answer. — Rohit Arora, Jul 08 '15 at 08:54
@hemal instead of anchor tag can we do it for input type which contains image? — Alén, Jul 08 '15 at 08:54

Tushar · Answer 1 · 2015-07-08T07:43:49.897

4

No need of using setTimeout. You can add dblclick event listener.

document.addEventListener("DOMContentLoaded", function (event) {

    var clk_ch = document.getElementById('clk');

    clk_ch.addEventListener('click', singleClick, false);
    clk_ch.addEventListener('dblclick', doubleClick, false);

});

DEMO

In jquery:

$('#clk').on('click', singleClick).on('dblclick', doubleClick);

DEMO

edited Jul 08 '15 at 07:43

answered Jul 08 '15 at 07:35

Tushar

85,780
21
159
179

Since this is tagged as jQuery it might useful to know that they also offer it. http://api.jquery.com/dblclick/. – stevenw00 Jul 08 '15 at 07:39
should i include any library to work with addEventListener()...i m not getting alert atall :( – Alén Jul 08 '15 at 07:40
1

@Alén No, you don't need any library for that. – Tushar Jul 08 '15 at 07:41
1

@stevenw00 Yes, added – Tushar Jul 08 '15 at 07:42
for Click event nothing is trigering – Alén Jul 08 '15 at 07:43
When you double click, single click is also firing as per your jQuery code. Any workaround? – Hemal Jul 08 '15 at 07:50
I have replied with already available answer and that is a good solution. – Hemal Jul 08 '15 at 07:50

how to check the click is single or double in javascript

1 Answers1