MouseEvent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨julio de 2015⁩.

* Some parts of this feature may have varying levels of support.

La interfazMouseEvent representa eventos que ocurren debido a que el usuario interactúa con un dispositivo señalador (como un mouse).Los eventos comunes que usan esta interfaz incluyenclick,dblclick,mouseup,mousedown.

MouseEvent deriva deUIEvent, que a su vez deriva deEvent.Aunque el métodoMouseEvent.initMouseEvent() se mantiene por compatibilidad con versiones anteriores, la creación de un objetoMouseEvent se debe realizar mediante el constructorMouseEvent().

Varios eventos más específicos se basan enMouseEvent, incluidosWheelEvent,DragEvent yPointerEvent.

Constructor

MouseEvent(): Crea un objetoMouseEvent.

Propiedades estáticas

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWNNo estándarRead only: Fuerza mínima necesaria para un clic normal.
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWNNo estándarRead only: Fuerza mínima necesaria para un clic de fuerza.

Propiedades de instancia

Esta interfaz también hereda propiedades de sus padres,UIEvent yEvent.

MouseEvent.altKeyRead only: Devuelvetrue si la teclaalt estaba presionada cuando se activó el evento del mouse.
MouseEvent.buttonRead only: El número de botón que se presionó (si corresponde) cuando se activó el evento del mouse.
MouseEvent.buttonsRead only: Los botones que se presionaron (si los hay) cuando se activó el evento del mouse.
MouseEvent.clientXRead only: La coordenada X del puntero del mouse en coordenadas locales (contenido DOM).
MouseEvent.clientYRead only: La coordenada Y del puntero del mouse en coordenadas locales (contenido DOM).
MouseEvent.ctrlKeyRead only: Devuelvetrue si la teclacontrol estaba presionada cuando se activó el evento del mouse.
MouseEvent.layerXNo estándarRead only: Devuelve la coordenada horizontal del evento relativa a la capa actual.
MouseEvent.layerYNo estándarRead only: Devuelve la coordenada vertical del evento relativa a la capa actual.
MouseEvent.metaKeyRead only: Devuelvetrue si la teclameta estaba presionada cuando se activó el evento del mouse.
MouseEvent.movementXRead only: La coordenada X del puntero del mouse en relación con la posición del último eventomousemove.
MouseEvent.movementYRead only: La coordenada Y del puntero del mouse en relación con la posición del último eventomousemove.
MouseEvent.offsetXRead only: La coordenada X del puntero del mouse en relación con la posición del borde del relleno del nodo de destino.
MouseEvent.offsetYRead only: La coordenada Y del puntero del mouse en relación con la posición del borde del relleno del nodo de destino.
MouseEvent.pageXRead only: La coordenada X del puntero del mouse en relación con todo el documento.
MouseEvent.pageYRead only: La coordenada Y del puntero del mouse en relación con todo el documento.
MouseEvent.relatedTargetRead only: El objetivo secundario del evento, si lo hay.
MouseEvent.screenXRead only: La coordenada X del puntero del mouse en coordenadas globales (pantalla).
MouseEvent.screenYRead only: La coordenada Y del puntero del mouse en coordenadas globales (pantalla).
MouseEvent.shiftKeyRead only: Devuelvetrue si la teclashift estaba presionada cuando se activó el evento del mouse.
MouseEvent.mozInputSourceNo estándarRead only: El tipo de dispositivo que generó el evento (una de las constantesMOZ_SOURCE_*).Esto le permite, por ejemplo, determinar si un evento de mouse fue generado por un mouse real o por un evento táctil (lo que podría afectar el grado de precisión con el que interpreta las coordenadas asociadas con el evento).
MouseEvent.webkitForceNo estándarRead only: La cantidad de presión aplicada al hacer clic.
MouseEvent.xRead only: Alias paraMouseEvent.clientX.
MouseEvent.yRead only: Alias paraMouseEvent.clientY.

Métodos de instancia

Esta interfaz también hereda métodos de sus padres,UIEvent yEvent.

MouseEvent.getModifierState(): Devuelve el estado actual de la tecla modificadora especificada. ConsulteKeyboardEvent.getModifierState() para obtener más información.
MouseEvent.initMouseEvent()Obsoleto: Inicializa el valor de unMouseEvent creado. Si el evento ya se envió, este método no hace nada.

Ejemplo

Este ejemplo demuestra la simulación de un clic (generando mediante programación un evento de clic) en una casilla de verificación usando métodos DOM.El estado del evento (cancelado o no) se determina luego con el valor de retorno del métodoEventTarget.dispatchEvent().

HTML

html

<p>  <label><input type="checkbox" /> Comprobado</label></p><p>  <button>    Haga clic en mí para enviar un MouseEvent a la casilla de verificación  </button></p>

JavaScript

function simulateClick() {  // Obtener el elemento para enviar un evento de clic  const cb = document.getElementById("checkbox");  // Crear un MouseEvent de clic artificial  let evt = new MouseEvent("click", {    bubbles: true,    cancelable: true,    view: window,  });  // Enviar el evento al elemento de la casilla de verificación  cb.dispatchEvent(evt);}document.getElementById("button").addEventListener("click", simulateClick);

Resultado

Especificaciones

Specification
UI Events # interface-mouseevent
CSSOM View Module # extensions-to-the-mouseevent-interface
Pointer Lock 2.0 # extensions-to-the-mouseevent-interface

Compatibilidad con navegadores

Véase también

Su padre directo,UIEvent
PointerEvent: Para eventos de puntero avanzados, incluido multitáctil

Help improve MDN

Learn how to contribute

This page was last modified on⁨18 ago 2023⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

MouseEvent

Help improve MDN