When Does A Click Become A Hold?

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 ther

Solution 1:

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

  })

});

<divid="click">click</div>

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