如何檢測鼠標左鍵在 javascript 中被按住

Question

我正在嘗試創建在單擊鼠標左鍵時獲取鼠標指針 position 的代碼。 但是當我使用下面的代碼時，它只在鼠標左鍵單擊時返回鼠標指針 position 一次，為了再次獲得鼠標 position，必須釋放並再次單擊按鈕。 我如何修改此代碼，以便如果鼠標左鍵單擊，鼠標指針的坐標每 0.1 秒返回一次。 因此，代碼將檢測是否按住鼠標左鍵

var canvas = document.getElementById('canvas');
function getCursorPosition(canvas, event) {
        const rect = canvas.getBoundingClientRect()
        const x = event.clientX - rect.left
        const y = event.clientY - rect.top
        console.log("x: " + x + " y: " + y)
    }
canvas.addEventListener('mousedown', function(e) {
        getCursorPosition(canvas, e)
    })

Answer 1

您可能應該在這里使用 mousemove 事件：

 var  holding = false;
 var canvas = document.getElementById('canvas');
 function getCursorPosition(canvas, event) {
     const rect = canvas.getBoundingClientRect()
     const x = event.clientX - rect.left
     const y = event.clientY - rect.top
     console.log("x: " + x + " y: " + y)
 }
 canvas.addEventListener('mousedown', function(e) {
     holding = true;

 })
 canvas.addEventListener('mouseup', function(e) {
     holding = false;

 })
   canvas.addEventListener('mousemove', function(e) {
   if(holding == true){
     getCursorPosition(canvas, e)
   }
 })

編輯：離開按鈕時，您還需要將 hold 設置為 false

canvas.addEventListener('mouseleave', function(e) {
     holding = false;

 })

Answer 2

您可以使用“setInterval”並可以指定您自己的每個控制台之間的等待時間（以毫秒為單位）

    var canvas = document.getElementById('canvas');

    function getCursorPosition(canvas, event) {
      const rect = canvas.getBoundingClientRect()
      const x = event.clientX - rect.left
      const y = event.clientY - rect.top
      console.log("x: " + x + " y: " + y)
    }
    var mousePosition, holding;

    function myInterval() {
      var setIntervalId = setInterval(function() {
        if (!holding) clearInterval(setIntervalId);
        getCursorPosition(canvas, mousePosition);
      }, 100); //set your wait time between consoles in milliseconds here
    }
    canvas.addEventListener('mousedown', function() {
      holding = true;
      myInterval();
    })
    canvas.addEventListener('mouseup', function() {
      holding = false;
      myInterval();
    })
    canvas.addEventListener('mouseleave', function() {
      holding = false;
      myInterval();
    })
    canvas.addEventListener('mousemove', function(e) {
      mousePosition = e;
    })

Answer 3

嘗試這個...

 var canvas = document.getElementById('canvas'); var mouseIsDown = false; var mouseInterval = null; var mouseEvent = null; function getCursorPosition(canvas, event) { const rect = canvas.getBoundingClientRect() const x = event.clientX - rect.left const y = event.clientY - rect.top console.log("x: " + x + " y: " + y) } canvas.addEventListener('mousedown', function (e) { mouseEvent = e; mouseIsDown =;mouseIsDown, getCursorPosition(canvas, e) mouseInterval = setInterval(() => { getCursorPosition(canvas, mouseEvent) }; 100). }) canvas,addEventListener('mousemove'; function (e) { mouseEvent = e. }) canvas,addEventListener('mouseup'; function (e) { mouseIsDown =;mouseIsDown; clearInterval(mouseInterval); })

編輯：根據您要完成的工作，您可能希望將 mouseup 偵聽器放在 window object 上。 只是一個想法。