Trabajar con eventos del mouse es uno de los casos de uso más básicos de JavaScript. La detección de clics es trivial, pero se vuelve un poco más complicada cuando se trata de diferenciar entre eventos de clic y arrastre. Con suerte, los ejemplos de código a continuación lo guiarán en la dirección correcta para su proyecto.
Identificar un arrastre de mouse frente a un clic de mouse
Detectar un arrastre del mouse requerirá el uso de tres eventos de mouse diferentes, mousedown, mousemovey mouseup. Echemos un vistazo a un ejemplo de código y luego lo desglosamos.
let drag = false let downListener = () => { drag = false } let moveListener = () => { drag = true } let upListener = () => { if (drag) { console.log('Drag Detected') } else { console.log('Click Detected') } } window.addEventListener('mousedown', downListener) window.addEventListener('mousemove', moveListener) window.addEventListener('mouseup', upListener) Copied La idea es muy sencilla:
- Cree una variable booleana que almacenará el estado de arrastre entre clics
- Al presionar el mouse, booleano
- Al mover el mouse, establezca el booleano en verdadero
- Con el mouse hacia arriba, verifique el valor booleano. Si es verdadero, el mouse fue arrastrado; si es falso, simplemente se hizo clic.
El código anterior establece los detectores de eventos en toda la ventana visible, pero también puede configurar los detectores en un elemento específico.
let element = document.getElementById('some_element') element.addEventListener('mousedown', downListener) element.addEventListener('mousemove', moveListener) element.addEventListener('mouseup', upListener) Copied Echa un vistazo a JSFiddle si quieres jugar con el código.
En muchos casos, también puede ser necesario liberar o eliminar los detectores de eventos. Hacerlo es muy simple.
window.removeEventListener('mousedown', downListener) window.removeEventListener('mousemove', moveListener) window.removeEventListener('mouseup', upListener) Copied Establecer un umbral de arrastre del mouse
El código anterior detectará bien un arrastre del mouse, pero es muy sensible. Si un usuario tiene la intención de hacer clic con el mouse pero lo mueve ligeramente, aún detectará un arrastre. Por este motivo, es una buena idea introducir un umbral al detectar un arrastre. El umbral es simplemente una distancia mínima que el mouse debe moverse para que se considere un arrastre. Veamos un ejemplo de codificación.
let drag = false let threshold = 5 let startingX let startingY let downListener = (e) => { drag = false startingX = event.pageX startingY = event.pageY } let moveListener = (e) => { const moveX = Math.abs(e.pageX - startingX) const moveY = Math.abs(e.pageY - startingY) if (moveX >= threshold || moveY >= threshold) { drag = true } } let upListener = () => { if (drag) { console.log('Drag Detected') } else { console.log('Click Detected') } } window.addEventListener('mousedown', downListener) window.addEventListener('mousemove', moveListener) window.addEventListener('mouseup', upListener) Copied Hay tres nuevas variables:
- umbral: la cantidad mínima de píxeles que el mouse necesita moverse para convertirse en un lastre
- StartingX: la posición X inicial del mouse en mousedown
- startY – la posición Y inicial del ratón en mousedown
Modificamos dos de nuestras funciones de escucha de eventos:
- mousedown: ahora también restablece las variables de inicio X e inicio Y a la posición inicial del mouse
- mousemove: ahora solo establece el booleano de arrastre si el mouse movió la cantidad de umbral en píxeles en cualquier dirección.
Vea el JSFiddle con el código de umbral de arrastre incluido aquí.
Hay, por supuesto, varias sintaxis que puede usar para lograr el mismo efecto, junto con toneladas de diferentes bibliotecas auxiliares. El código anterior debería funcionar como una solución estándar de JS para la mayoría de los casos de uso.
Si esta guía le resultó útil, consulte más guías de codificación de JavaScript en nuestra sección de JavaScript.
