如何避免在浏览器 JavaScript 中双击时(单击鼠标）处理

How to avoid (single) mouse click processing on double click in browser JavaScript?

本文关键字：单击 鼠标 处理 双击 何避免 浏览器 JavaScript      更新时间：2023-09-26

如果用户双击 HTML 按钮，则在双击事件侦听器之前调用单击事件侦听器。

有没有办法在双击时跳过单击处理（无需跳过箍）？

请记住，如果用户不双击，我希望能够对单击做出反应！

看看 jsfiddle.net 的不言自明的示例。

myEventButton.addEventListener(
    'click',
    function(/*e*/)
    {
        myClickDiv.innerHTML = 'Clicked.'; // Gets here first on double click.
    });
myEventButton.addEventListener(
    'dblclick',
    function(/*e*/)
    {
        myDblClickDiv.innerHTML = 'Double clicked.'; // Gets here last on double click.
    });

这是一个解决方案

我不知道是否有适当的方法，但这有效。这个想法是在点击之间保持一个计时器，并且您禁止任何比这更快的点击。这意味着双击时，第一次点击将被记录，但第二次点击太快将被忽略。

当然，你可以把它抽象在一个不错的函数后面，但你明白了。

您修改的代码：

// Added variables to store timers
var minTimeBetweenClicks = 1000;
var lastClickTime = Date.now();
myClearButton.addEventListener(
    'click',
    function()
    {
        myClickDiv.innerHTML = '';
        myDblClickDiv.innerHTML = '';
    });
myEventButton.addEventListener(
    'click',
    function(/*e*/)
    {
      // Check the timer before doing anything
      if (Date.now() - lastClickTime > minTimeBetweenClicks) {
        myClickDiv.innerHTML += ' Clicked.';
        lastClickTime = Date.now();
      }
    });
myEventButton.addEventListener(
    'dblclick',
    function(/*e*/)
    {
        myDblClickDiv.innerHTML = 'Double clicked.';
    });

PS：我还修改了您的点击代码以在按钮上添加"单击"，因此您可以看到双击不会添加两次。

相关文章：