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

Question

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

您可以使用“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 2

你应该在这里使用 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)

   }

 })

编辑：您还需要在离开按钮时将保持设置为 false

canvas.addEventListener('mouseleave', function(e) {

     holding = false;

 })

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

})