检测Javascript中的按住鼠标单击

这是我的密码：

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循环从未结束

---

知道为什么吗？

这里的问题是，您的代码以阻塞循环的形式运行

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不会阻止主线程。

如果连续多次单击，则会得到错误的单击并保持。更好的解决办法是

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

---

我相信你这里的问题是，你正在增加和减少mousedown的值，而不是简单地将其设置为true/false，然后检查这是否有帮助。不，这没有什么区别。我认为onmousedown异步运行函数，因此该值被设置为true，if语句被运行。但这似乎没有什么问题这里的问题是，你的检查，看看鼠标是否真的下降似乎被调用了一次，这应该是在自己的功能跟踪你何时进入鼠标和何时离开它。然后需要在onmousedown中调用此函数。这完全有道理！！见我的编辑。。它进入了一个无限的while循环现在要打破这个循环，你要做的就是像以前一样将mouseDown声明为一个全局范围变量。然后，当您的onmouseup被触发时，它应该将该全局变量设置为false并中断循环。另外，制作一个额外的函数并将while循环放入其中，以避免由于您当前仍在另一个事件中而无法调用另一个事件。在本例中，它只能在mouseup的最末端发现mousedown hold。使用mousedown函数中带有setTimeout的回调函数，它可以更早地发现它，并在此基础上执行一些操作。不需要更改代码，只是想指出，如果OP希望在暂停时通知用户。请看，我想要的是整数递增，比如每10毫秒递增一次。我按住鼠标的时间越长，整数就越大。在setTimeout的回调中不应该有一个整数的限制增量，如果鼠标按下，再次递归启动超时。哇。这是最简单的方法吗。我要试一试！哦，那很容易！！谢谢你的帮助！