How to determine if the mouse button is held for a certain period of time after a click

Question

Hi, I'm pretty new to javascript. I want to be able to fire an event when the user clicks on a point in the canvas (short press), and if he holds it by clicking on 1500 ms, I have to have different functionality. I have to admit the long press before the mouse is finished.

For ex:

el.addEventListener("mousedown", doMouseDown, false); el.addEventListener("mouseup", update, false);

function doMouseDown()
{
if (short press)
functionality of shortpress

if (longpress) 
functionality of long press
}

function update()
//do some update of coordinates

Answer 1

There are several keys that must be considered for proper operation:

• An element can detect mouse events only for itself when the mouse is over it. For the mouse to work correctly, it needs to be tracked “globally” (by window or document) and track the status of the button.
• long-press . : , , ( longpress). , , .
• (. )

, this . . mouseup , , mousedown. (bind()), longpress, (. ).

var d = document.querySelectorAll("div"),
    isDown = false,
    isLong = false,
    target,                                         // which element was clicked
    longTID;                                        // so we can cancel timer

// add listener for elements
d[0].addEventListener("mousedown", handleMouseDown);
d[1].addEventListener("mousedown", handleMouseDown);
d[2].addEventListener("mousedown", handleMouseDown);

// mouseup need to be monitored on a "global" element or we might miss it if
// we move outside the original element.
window.addEventListener("mouseup", handleMouseUp);

function handleMouseDown() {
  this.innerHTML = "Mouse down...";
  isDown = true;                                    // button status (any button here)
  isLong = false;                                   // longpress status reset
  target = this;                                    // store this as target element
  clearTimeout(longTID);                            // clear any running timers
  longTID = setTimeout(longPress.bind(this), 1500); // create a new timer for this click
};

function handleMouseUp(e) {
  if (isDown && isLong) {                           // if a long press, cancel
    isDown = false;                                 // clear in any case
    e.preventDefault();                             // and ignore this event
    return
  }
  
  if (isDown) {                                     // if we came from down status:
      clearTimeout(longTID);                        // clear timer to avoid false longpress
      isDown = false;
      target.innerHTML = "Normal up";               // for clicked element
      target = null;
  }
};

function longPress() {
  isLong = true;
  this.innerHTML = "Long press";
  // throw custom event or call code for long press
}

div {background:#ffe;border:2px solid #000; width:200px;height:180px;
     font:bold 16px sans-serif;display:inline-block}

<div>Click and hold me...</div>
<div>Click and hold me...</div>
<div>Click and hold me...</div>

Hide result

Answer 2

( jQuery):

var mouseStatus = 'up';
var mouseTimeout;
myElement.addEventListener("mousedown",function() {
    clearTimeout(mouseInterval);
    mouseStatus='down';
    mouseTimeout = setTimeout(function(){
        mouseStatus='longDown';
        doSpecialStuffBecauseOfLongDown(); // put your secret sauce here
    }, 1500);
}, false);
myElement.addEventListener("mouseup",function() {
    clearTimeout(mouseTimeout);
    mouseStatus='up';
}, false);