Question

我正在尝试创建代码，以在单击鼠标左键时获取鼠标指针的位置。但是，当我使用下面的代码时，它仅在左键单击时返回鼠标指针位置ONCE，并且要使其再次获得鼠标位置，必须释放按钮并再次单击。我如何修改此代码，以便如果左键单击鼠标，则每隔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)
   }
 })

编辑：当您离开按钮时，还需要将holding设置为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对象上。只是一个想法。

如何在javascript中按住鼠标左键

3 个答案: