如何检测点击后鼠标按钮是否被按住一定时间

Question

嗨，我是 javascript 的新手。我希望能够在用户点击 canvas（短按）中的点时触发一个事件，如果按住该点击 1500 毫秒，我应该有另一个功能。我应该在 mouseup 完成之前识别出长按。

例如：

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

这对你有用（这里没有 jQuery）：

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);

Answer 2

要使其正常工作，需要考虑几个关键点：

一个元素只有在鼠标经过它时才能检测到它自己的鼠标事件。为了使 mouseup 正常工作，必须对其进行监视 "globally"（在 window 或文档上），并跟踪按钮状态。
A status 必须在所有阶段跟踪和尊重类型的长按。例如：如果长按，请确保 mouseup 最终遵循新状态并且本身被覆盖（否则您将在长按之上获得 mouseup）。如果您确实无论如何都想要鼠标弹起，当然请忽略这一点。
多个元素的功能（见下面的评论）

您可以通过在处理程序代码中引用 this 来使处理程序通用。这样你就可以将它附加到任何元素。 mouseup 的全局处理程序仅添加一次，并将使用跟踪目标来区分哪个元素导致了 mousedown。计时器调用的代码将绑定元素上下文 (bind())，因此我们也可以使用通用的长按处理程序来寻址源元素（参见下面的演示）。

例子

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>

如何检测点击后鼠标按钮是否被按住一定时间

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

javascript

canvas

html5-canvas

例子