Cómo detectar el botón izquierdo del mouse se mantiene presionado en javascript

Question

Estoy tratando de crear un código que obtenga la posición de los punteros del mouse cuando se hace clic con el botón izquierdo del mouse. Pero cuando uso, uso el código a continuación, solo devuelve la posición del puntero del mouse UNA VEZ cuando se hace clic con el botón izquierdo del mouse y para que vuelva a posicionarse, se debe soltar el botón y hacer clic nuevamente. ¿Cómo podría modificar este código para que si se hace clic con el botón izquierdo del mouse, se devuelvan las coordenadas del puntero del mouse cada 0.1 segundos? Por lo tanto, el código detectará si se mantiene presionado el botón izquierdo del mouse

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

javascript html

0

mrbeast 12 oct. 2019 a las 22:03

Answer 1

Puede usar "setInterval" y puede especificar su propio tiempo de espera entre cada consola en milisegundos

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

1

krish 12 oct. 2019 a las 21:36

Answer 2

Probablemente deberías usar el evento mousemove aquí:

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

EDITAR: también debe establecer la retención en falso cuando abandona el botón

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

 })

1

Ifaruki 12 oct. 2019 a las 19:14

Answer 3

Prueba esto...

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

Editar: Dependiendo de lo que intente lograr, es posible que desee colocar el detector de mouse en el objeto de la ventana. Solo un pensamiento.

1

RossK92 12 oct. 2019 a las 22:30

Cómo detectar el botón izquierdo del mouse se mantiene presionado en javascript

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript