如何检测鼠标左键在 javascript 中被按住

Question

I am trying to create code that gets the mouse pointers position when the mouse is left clicked. But when using i use the code below, it only returns the mouse pointer position ONCE when the mouse is left clicked and for it to get the mouse position again the button has to be released and clicked again. How could I modify this code so that if the mouse is left clicked, coordinates of the mouse pointer are returned every 0.1 seconds. Thus the code will be detecting if the left mouse button is being held

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

you should probably use mousemove event here:

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

EDIT: You also need to set holding to false when you leave the button

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

 })

Answer 2

You can use "setInterval" and can specify your own wait time between every console in milliseconds

    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

Try this...

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

Edit: Depending on what you're trying to accomplish you might want to put the mouseup listener on the window object. Just a thought.