最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin5浏览0评论

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
Share Improve this question edited May 14, 2015 at 22:33 Jonathan M 17.5k9 gold badges60 silver badges94 bronze badges asked May 14, 2015 at 21:17 AJ007AJ007 1893 silver badges14 bronze badges
Add a ment  | 

2 Answers 2

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);
发布评论

评论列表(0)

  1. 暂无评论