Eventos del mouse

Descubra los conceptos básicos para trabajar con eventos de mouse en JavaScript

Ver más enEventos de JavaScript

Al mirar los eventos del mouse, tenemos la capacidad de interactuar con

  • mousedownse presionó el botón del mouse
  • mouseupse soltó el botón del mouse
  • clickun evento de clic
  • dblclickun evento de doble clic
  • mousemovecuando el mouse se mueve sobre el elemento
  • mouseovercuando el mouse se mueve sobre un elemento o uno de sus elementos secundarios
  • mouseentercuando el mouse se mueve sobre un elemento. Similar amouseoverpero no burbujea (¡más sobre esto pronto!)
  • mouseoutcuando el mouse se mueve fuera de un elemento, y cuando el mouse ingresa a elementos secundarios
  • mouseleavecuando el mouse se mueve fuera de un elemento. Similar amouseoutpero no burbujea (¡más sobre esto pronto!)
  • contextmenucuando se abre el menú contextual, por ejemplo, con el botón derecho del mouse, haga clic

Los eventos se superponen. Cuando rastreas unclickevento, es como rastrear unmousedownseguido de unmouseupevento. En el caso dedblclick,clickTambién se dispara dos veces.

mousedown,mousemoveymouseupse puede utilizar en combinación para realizar un seguimiento de los eventos de arrastrar y soltar.

Ten cuidado conmousemove, ya que dispara muchas veces durante el movimiento del mouse. Necesitamos aplicarestrangulamiento, que es algo de lo que hablaremos más cuando analicemos el desplazamiento.

Cuando estamos dentro de un controlador eventh, tenemos acceso a muchas propiedades.

Por ejemplo, en un evento de mouse, podemos verificar qué botón del mouse se presionó marcando elbuttonpropiedad del objeto de evento:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
  // mouse button pressed
  console.log(event.button) //0=left, 2=right
})

Aquí están todas las propiedades que podemos usar:

  • altKeyverdadero si se presionó la tecla alt cuando se disparó el evento
  • buttonsi lo hay, el número del botón que se presionó cuando se disparó el evento del mouse (generalmente 0 = botón principal, 1 = botón central, 2 = botón derecho). Funciona en eventos causados por hacer clic en el botón (por ejemplo, clics)
  • buttonssi lo hay, un número que indica el botón o botones presionados en cualquier evento del mouse.
  • clientX/clientYlas coordenadas xey del puntero del mouse en relación con la ventana del navegador, independientemente del desplazamiento
  • ctrlKeyverdadero si se presionó la tecla ctrl cuando se disparó el evento
  • metaKeyverdadero si se presionó la tecla meta cuando se disparó el evento
  • movementX/movementYlas coordenadas xey del puntero del mouse relativas a la posición del último evento mousemove. Se usa para rastrear la velocidad del mouse mientras se mueve
  • regionutilizado en la API de Canvas
  • relatedTargetel objetivo secundario para el evento, por ejemplo, cuando se mueve
  • screenX/screenYlas coordenadas xey del puntero del mouse en las coordenadas de la pantalla
  • shiftKeyverdadero si se presionó la tecla Mayús cuando se disparó el evento

Más tutoriales de navegador: