Eventos del ratón

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

Ver más sobre los eventos de JavaScript

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

• mousedownSe presionó el botón del ratón
• mouseupSe soltó el botón del ratón.
• clickun evento de clic
• dblclickun evento de doble clic
• mousemovecuando se mueve el ratón sobre el elemento
• mouseovercuando el ratón se mueve sobre un elemento o uno de sus elementos secundarios
• mouseenterCuando se mueve el ratón sobre un elemento. Es similar a mouseover, pero no se genera una burbuja (¡más sobre esto pronto!)
• mouseoutCuando el ratón se mueve fuera de un elemento y cuando el ratón entra en un elemento secundario
• mouseleaveCuando el ratón se mueve fuera de un elemento. Es similar a mouseout, pero no se genera una burbuja (¡más sobre esto pronto!)
• contextmenucuando se abre el menú contextual, por ejemplo al hacer clic con el botón derecho del ratón

Los eventos se superponen. Cuando se realiza el seguimiento de un clickevento, es como si se estuviera realizando el mousedownseguimiento de un evento seguido de mouseupotro. En el caso de dblclick, clicktambién se activa dos veces.

mousedowny se pueden usar en combinación mousemovepara mouseuprastrear eventos de arrastrar y soltar.

Tenga cuidado con mousemove, ya que se activa muchas veces durante el movimiento del mouse. Necesitamos aplicar una limitación , que es algo de lo que hablaremos más cuando analizamos el desplazamiento.

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

Por ejemplo, en un evento del mouse, podemos verificar qué botón del mouse se presionó verificando la buttonpropiedad 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 utilizar:Te recomendamos Filtros de Agua

• 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 activó el evento del mouse (generalmente 0 = botón principal, 1 = botón central, 2 = botón derecho). Funciona en eventos provocados al hacer clic en el botón (por ejemplo, clics)
• buttonsSi corresponde, un número que indica el botón o botones presionados en cualquier evento del mouse.
• clientX/ clientYlas coordenadas xey del puntero del ratón 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 ratón en relación con la posición del último movimiento del ratón. Se utiliza para seguir la velocidad del ratón mientras se mueve.
• regionutilizado en la API de Canvas
• relatedTargetel objetivo secundario del evento, por ejemplo, al movimiento
• screenX/ screenYlas coordenadas xey del puntero del ratón en las coordenadas de la pantalla
• shiftKeyverdadero si se presionó la tecla shift cuando se disparó el evento

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Eventos del ratón

Ver más sobre los eventos de JavaScript Descubra los conceptos básicos para trabajar con eventos del mouse en JavaScript Descubra los conceptos básicos para

programar

es

2025-01-22

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente