如何在JavaScript中检查单击还是双击

Question

我正在尝试检查元素的点击是单击还是双击。

我正在尝试使用这段代码。

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);

我没有收到任何警报。我做错了什么吗？clk是被点击元素的id。

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

- Alén

---

可能是重复的问题：如何区分单击事件和双击事件？ - Rohit Arora

我认为这里的答案比链接中的更好。 - stevenw00

这可能会有所帮助。它有一个小例子：https://dev59.com/i2w15IYBdhLWcg3w4_7k#7845282， FIDDLE: http://jsfiddle.net/KpCwN/4/ - Hemal

@stevenw00，这里仍然存在之前讨论的问题。我认为这是重复的，并且会得到相同的答案。 - Rohit Arora

@hemal我们可以将其应用于包含图像的input类型，而不是锚标记吗？ - Alén

Answer 1

不需要使用setTimeout，你可以添加dblclick事件监听器。

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

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

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

});

演示

使用jquery：

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

DEMO

- Tushar

---

由于此标记为jQuery，因此了解它们也提供它可能很有用。http://api.jquery.com/dblclick/. - stevenw00

@Alén 不需要任何库来实现这个。 - Tushar

@stevenw00 是的，已添加。 - Tushar

当您双击时，根据您的jQuery代码，单击也会触发。有什么解决方法吗？ - Hemal

我已经回复了可用的答案，那是一个很好的解决方案。 - Hemal