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

2022-01-17 00:00:00 canvas javascript html5-canvas

您好，我对 javascript 很陌生.我希望能够在用户单击画布上的点(短按)时触发一个事件，如果按住该单击 1500 毫秒，我应该有另一个功能.我应该在 mouseup 完成之前识别出长按.

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.

例如:

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

推荐答案

需要考虑几个键才能正常工作:

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

  • 只有当鼠标悬停在元素上时，元素才能为自己检测鼠标事件.为了使 mouseup 正常工作，必须全局"监控(在窗口或文档上)，并跟踪按钮状态.
  • 必须在所有阶段跟踪和尊重长按类型的状态.例如:如果长按，请确保 mouseup 最终尊重新状态并且本身被覆盖(否则您将在长按之上获得 mouseup).如果您确实无论如何都希望鼠标向上，当然忽略这一点.
  • 多个元素的功能(见下方评论)
  • 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 comment below)

您可以通过在处理程序代码中引用 this 来使处理程序通用.通过这种方式，您可以将其附加到任何元素.mouseup 的全局处理程序仅添加一次，并将使用跟踪的目标来区分导致 mousedown 的元素.计时器调用的代码将绑定元素上下文 (bind())，因此我们也可以使用通用的 longpress 处理程序来处理源元素(参见下面的演示).

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

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>

相关文章