javascript - How to detect if mouse button is held down for a certain amount of time after click -

hi quite new javascript. want able fire event when user clicks on point in canvas(short press), , if holds click down 1500 ms, should have functionality. should recognize long press before mouseup done.

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 update of coordinates 

there couple of keys needs considered work properly:

• an element can detect mouse events when mouse on it. mouseup work has monitored "globally" (on window or document), , button status tracked.
• a status type long-press must tracked , respected in stages. example: if long press, make sure mouseup respect new status , overridden (or mouseup on top of longpress). if do want mouseup in casejust ignore point of course.
• functionality multiple elements (see comment below)

you can make handlers generic referencing this inside handler code. way can attach element. global handler mouseup added once , use tracked target distinguish element caused mousedown. timer invoked code have element context bound (bind()) can use generic longpress handler addressing source element (see demo below).

example

var d = document.queryselectorall("div"),      isdown = false,      islong = false,      target,                                         // element clicked      longtid;                                        // can cancel timer    // add listener elements  d[0].addeventlistener("mousedown", handlemousedown);  d[1].addeventlistener("mousedown", handlemousedown);  d[2].addeventlistener("mousedown", handlemousedown);    // mouseup need monitored on "global" element or might miss if  // move outside 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 target element    cleartimeout(longtid);                            // clear running timers    longtid = settimeout(longpress.bind(this), 1500); // create new timer click  };    function handlemouseup(e) {    if (isdown && islong) {                           // if long press, cancel      isdown = false;                                 // clear in case      e.preventdefault();                             // , ignore event      return    }        if (isdown) {                                     // if came down status:        cleartimeout(longtid);                        // clear timer avoid false longpress        isdown = false;        target.innerhtml = "normal up";               // clicked element        target = null;    }  };    function longpress() {    islong = true;    this.innerhtml = "long press";    // throw custom event or call code long press  }

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

<div>click , hold me...</div>  <div>click , hold me...</div>  <div>click , hold me...</div>