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)
})
3 respuestas
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;
})
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;
})
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.
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.