在 Javascript 中檢測按住鼠標單擊

Question

這是我的代碼：

var mouseDown = false;

document.body.onmousedown = function() { 
  console.log("MOUSE DOWN");
  mouseDown = true;
  increaseRad();
}
document.body.onmouseup = function() {
  console.log("MOUSE UP");
  mouseDown = false;
}

function increaseRad(){
  rad = 0;
  while(mouseDown){
    console.log("mouse is still down");
    rad++;
    console.log(rad)
  }
}

當我按下時， increaseRad運行，但里面的 while 循環永遠不會結束。

知道為什么嗎？

Answer 1

這里的問題是您的代碼作為阻塞循環運行。

while(mouseDown){
  console.log("mouse is still down");
  rad++;
  console.log(rad)
}

瀏覽器在單個線程中評估 Javascript，並且此循環永遠不會暫停以讓瀏覽器處理這些事件處理程序。

相反，您可以僅使用異步函數來偵聽 mousedown 事件，然后啟動計時器。 如果計時器結束時鼠標仍然按下，那么您可以將其計為長按。

var mouseIsDown = false;

window.addEventListener('mousedown', function() {
  mouseIsDown = true;
  setTimeout(function() {
    if(mouseIsDown) {
      // mouse was held down for > 2 seconds
    }
  }, 2000);
});

window.addEventListener('mouseup', function() {
  mouseIsDown = false;
});

這些異步操作（ addEventListener 、 setTimeout ）不會阻塞主線程。

Answer 2

如果您連續多次單擊，就會出現錯誤的單擊和按住。 更好的解決辦法是...

var mouseIsDown = false;
var idTimeout;

window.addEventListener('mousedown', function() {
  mouseIsDown = true;
  idTimeout = setTimeout(function() {
    if(mouseIsDown) {
      // mouse was held down for > 2 seconds
    }
  }, 2000);
});

window.addEventListener('mouseup', function() {
  clearTimeout(idTimeout);
  mouseIsDown = false;
});