点击什么时候成为持有？ [英] When does a click become a hold?

问题描述

我正在制作一个网络应用，如果用户点击vs保持按钮，按钮的行为会有所不同。我一直在尝试不同的时间，这让我想知道这种事情是否有任何既定的标准。

I'm making a web app where a button's behavior is different if the user clicks vs holds the button. I have been experimenting with different timings and it got me wondering if there is any established standard for this kind of thing.

澄清：我想知道是否确切时间是标准的。下面是我使用的代码，150ms是保留的阈值。

For clarification: I am wondering if there is an exact timing that is standard. Below is the code I am using with 150ms being the threshold for a hold.

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
}

推荐答案

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

Answering exactly your question, hold becomes click. You could set the click event (it's release in fact), inside the mousedown event. Run the code below and try holding and release the mouse button.

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

  })

});

<div id="click">click</div>

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

In this case, if we hold the button less that 200 milliseconds, just the click (release) event is fired.

这篇关于点击什么时候成为持有？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！