什么时候点击变成保留？

【问题标题】：When does a click become a hold?什么时候点击变成保留？
【发布时间】：2018-08-20 15:31:06
【问题描述】：

我正在制作一个 Web 应用程序，如果用户单击与按住按钮，按钮的行为会有所不同。我一直在尝试不同的时间，这让我想知道这种事情是否有任何既定的标准。

澄清：我想知道是否有一个标准的确切时间。下面是我正在使用的代码，其中 150 毫秒是暂停的阈值。

function onMouseDown()
{
    var holdTimeout = setTimeout(function()
    {
        //Hold code (also cancels click event)
    }, 150);

    var cancelHold = function()
    {
        clearTimeout(holdTimeout);
    };
    window.onmouseup = cancelHold;
}

function onClick()
{
    //Click code
}

【问题讨论】：

不知道任何标准。您需要评估元素被点击的时间。去检查this post
使用长按的移动设备允许用户调整时间。值得研究，因为您的用途似乎相似。

标签： javascript html reactjs dom-events

【解决方案1】：

准确回答您的问题，按住变为点击。您可以在mousedown 事件中设置click 事件（实际上是发布）。运行下面的代码并尝试按住并释放鼠标按钮。

document.getElementById("click").addEventListener('mousedown', (e) => {
  var i = 0;
  var int = setInterval(() => {
    console.log("hold " + i++);//<-- actions when we hold the button
  }, 200)

  document.getElementById("click").addEventListener("click", () => {

    clearInterval(int);

    console.log("release")//<-- actions when we release the button

  })

});

&lt;div id="click"&gt;click&lt;/div&gt;

在这种情况下，如果我们按住按钮少于 200 毫秒，则只会触发 click（释放）事件。

【讨论】：