鼠標按下時的 JavaScript

Question

var mdflag;
var count = 0;

document.addEventListener("mousedown",mdown,false);
    document.addEventListener("mouseup",mup,false);
}


function mdown()
{
    mdflag=true;
    while(mdflag)
    document.getElementById("testdiv").innerHTML = count++;

}
function mup()
{
    mdflag = false;
}

我想在鼠標按下時運行代碼，我找不到任何建議我可以在 while(mousedown) 中執行的操作，所以我嘗試為 mousedown 制作一個標志，該標志在鼠標按下時重置，但是我相信 while 循環是什么導致我陷入無限循環。

有什么建議可以幫助我實現目標嗎？

Answer 1

您必須在某個合理的時間間隔內調用 mousedown 活動。 我會這樣做：

var mousedownID = -1;  //Global ID of mouse down interval
function mousedown(event) {
  if(mousedownID==-1)  //Prevent multimple loops!
     mousedownID = setInterval(whilemousedown, 100 /*execute every 100ms*/);


}
function mouseup(event) {
   if(mousedownID!=-1) {  //Only stop if exists
     clearInterval(mousedownID);
     mousedownID=-1;
   }

}
function whilemousedown() {
   /*here put your code*/
}
//Assign events
document.addEventListener("mousedown", mousedown);
document.addEventListener("mouseup", mouseup);
//Also clear the interval when user leaves the window with mouse
document.addEventListener("mouseout", mouseup);

Answer 2

您不能這樣做，因為您的函數必須在處理另一個事件之前結束，但是您可以重復調用一個函數，直到鼠標抬起：

var timer;
document.addEventListener("mousedown", function(){
     timer=setInterval(function(){
          document.getElementById("testdiv").innerHTML = count++;
     }, 100); // the above code is executed every 100 ms
});
document.addEventListener("mouseup", function(){
    if (timer) clearInterval(timer)
});

Answer 3

您需要使用 setInterval 來執行您的功能並使用 clearInternal 來停止

let interval = setInterval(function(){
    console.log("executing...");
}, 0);


document.addEventListener("mouseup", function(){
    clearInterval(interval); 
    console.log('End'); 
});