Question

我希望能够将一个功能附加到一个元素上，该功能只有在对该元素单击了给定时间后才能运行。

有几个（1，2，3）问题与处理javascript中的鼠标保持有关；但是这些问题要么使用jQuery，要么与更特定的用例有关。

我想实现一些更通用的方法，并且我认为应该针对此问题在堆栈溢出上找到一个很好的答案。

Answer 1

这是我使用window.setTimeout得到的：

  var mouseTimer;
  var myVar;
  function mouseDown() { 
      mouseTimer = window.setTimeout(myFunction,500); //set timeout to fire in 2 seconds when the user presses mouse button down
  }

  function myFunction(){ myVar = true;}
  var div = document.getElementById("testBtn");
  testBtn.addEventListener("mousedown", mouseDown);
  document.body.addEventListener("mouseup", removeTimer);  
  
  function removeTimer(){
     if(myVar) console.log("a");  
     if (mouseTimer) window.clearTimeout(mouseTimer);
     myVar = false;
     
   }

<button id="testBtn">Test</button>

Answer 2

尽管感觉很冗长，但这是一种方法：

const addHoldListener = (element, f, timeout) => {
  let down = 0;
  let up = 0;

  const upListener = () => {
    up = Date.now();
    const diff = up - down;

    if (diff >= timeout) {
      f();
    }

    element.removeEventListener('mouseup', upListener);
  };
  
  const downListener = () => {
    down = Date.now();
    element.addEventListener('mouseup', upListener);
  };
  
  element.addEventListener('mousedown', downListener);
};

addHoldListener(
  document.querySelector('button'),
  () => console.log('a'),
  500
)

<button>Test</button>

香草javascript中的按住事件

2 个答案: