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

admin管理员组

文章数量:1321235

Hi I am quite new to javascript. I want to be able to fire an event when a user clicks on point in canvas(short press), and if holds that click down for 1500 ms, i should have another functionality. I should recognize the long press before the mouseup is 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 some update of coordinates

Hi I am quite new to javascript. I want to be able to fire an event when a user clicks on point in canvas(short press), and if holds that click down for 1500 ms, i should have another functionality. I should recognize the long press before the mouseup is 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 some update of coordinates

• javascript
• canvas
• html5-canvas

Share Improve this question Follow edited May 14, 2015 at 22:33 Jonathan M 17.5k99 gold badges6060 silver badges9494 bronze badges asked May 14, 2015 at 21:17 AJ007AJ007 18933 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

There are a couple of keys that needs to be considered for this to work properly:

• An element can only detect mouse events for itself when the mouse is over it. For mouseup to work properly it has to be monitored "globally" (on window or document), and the button status tracked.
• A status for type the long-press must be tracked and respected in all stages. For example: if long press, make sure mouseup eventually respect the new status and is itself overridden (or you will get a mouseup on top of a longpress). If you do want the mouseup in any casejust ignore this point of course.
• Functionality for multiple elements (see ment below)

You can make the handlers generic by referencing this inside the handler code. This way you can attach it to any element. The global handler for mouseup is only added once and will use a tracked target to distinguish which element caused the mousedown. The timer invoked code will have the element context bound (bind()) so we can use the generic longpress handler addressing the source element as well (see demo below).

Example

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>

This will work for you (no jQuery here):

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

本文标签：