如何检测鼠标左键在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)   } })编辑：您还需要在离开按钮时将保持设置为 falsecanvas.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);})