如何检测鼠标按钮是否在单击后按下一定时间 [英] How to detect if mouse button is held down for a certain amount of time after click

问题描述

您好我是javascript的新手。我想要能够在用户点击画布上的点（短按）时触发事件，如果按下持续1500毫秒，我应该有另一个功能。我应该认识到长按前mouseup完成。

例如：

  el.addEventListener（mousedown， doMouseDown，false）; el.addEventListener（mouseup，update，false）; 
 
 function doMouseDown（）
 {
 if（短按）
快捷键的功能
 
 if（longpress）
功能长按
} 
 
函数update（）
 //做一些坐标更新
  

解决方案

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

• 元素只能在鼠标悬停在其上时检测鼠标事件。要使鼠标正常工作，必须在全局（在窗口或文档上）进行监视，并跟踪按钮状态。


• - 必须在所有阶段跟踪和尊重。例如：如果长按，确保mouseup最终尊重新的状态，并且它本身被覆盖（或者你会在longpress的顶部得到一个mouseup）。


• 多个元素的功能（见下面的注释）

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

示例

  var d = document.querySelectorAll（div），isDown = false ，isLong = false，target，//被点击的元素longTID; //所以我们可以取消计时器//为elementsd [0]添加监听器.addEventListener（mousedown，handleMouseDown）; d [1] .addEventListener（mousedown，handleMouseDown）; d [2] .addEventListener（mousedown ，handleMouseDown）; // mouseup需要在一个全局元素上进行监控，否则我们可能会错过它的原有的element.window.addEventListener（mouseup，handleMouseUp）; function handleMouseDown（）{this。 innerHTML =鼠标向下...; isDown = true; //按钮状态（这里的任何按钮）isLong = false; // longpress status reset target = this; // store this as target element clearTimeout（longTID）; //清除任何正在运行的计时器longTID = setTimeout（longPress.bind（this），1500）; //为这个点击创建一个新的计时器}; function handleMouseUp（e）{if（isDown&& isLong）{//如果长按，取消isDown = false; //在任何情况下都清除e.preventDefault（）; //并忽略此事件return} if（isDown）{//如果我们来自down状态：clearTimeout（longTID）; //清除定时器以避免false longpress isDown = false; target.innerHTML =Normal up; // for clicked element target = null; }}; function longPress（）{isLong = true; this.innerHTML =长按; // throw自定义事件或长按代码}  

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

 < div>单击并按住我...< / div>< div>单击并按住我...< / div>< div>单击并按住我...< / div&  

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

解决方案

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 comment 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>

这篇关于如何检测鼠标按钮是否在单击后按下一定时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！