MouseEvent

La interfaz MouseEvent 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 incluyen click, dblclick (en-US), mouseup (en-US), mousedown.

MouseEvent deriva de UIEvent, que a su vez deriva de Event. Aunque el método MouseEvent.initMouseEvent() se mantiene por compatibilidad con versiones anteriores, la creación de un objeto MouseEvent se debe realizar mediante el constructor MouseEvent() (en-US).

Varios eventos más específicos se basan en MouseEvent, incluidos WheelEvent, DragEvent y PointerEvent (en-US).

Constructor

MouseEvent() (en-US): Crea un objeto MouseEvent.

Propiedades estáticas

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN (en-US) Non-standard Read only: Fuerza mínima necesaria para un clic normal.
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN (en-US) Non-standard Read only: Fuerza mínima necesaria para un clic de fuerza.

Propiedades de instancia

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

MouseEvent.altKey (en-US) Read only: Devuelve true si la tecla alt estaba presionada cuando se activó el evento del mouse.
MouseEvent.button (en-US) Read only: El número de botón que se presionó (si corresponde) cuando se activó el evento del mouse.
MouseEvent.buttons (en-US) Read only: Los botones que se presionaron (si los hay) cuando se activó el evento del mouse.
MouseEvent.clientX (en-US) Read only: La coordenada X del puntero del mouse en coordenadas locales (contenido DOM).
MouseEvent.clientY (en-US) Read only: La coordenada Y del puntero del mouse en coordenadas locales (contenido DOM).
MouseEvent.ctrlKey (en-US) Read only: Devuelve true si la tecla control estaba presionada cuando se activó el evento del mouse.
MouseEvent.layerX (en-US) Non-standard Read only: Devuelve la coordenada horizontal del evento relativa a la capa actual.
MouseEvent.layerY (en-US) Non-standard Read only: Devuelve la coordenada vertical del evento relativa a la capa actual.
MouseEvent.metaKey (en-US) Read only: Devuelve true si la tecla meta estaba presionada cuando se activó el evento del mouse.
MouseEvent.movementX (en-US) Read only: La coordenada X del puntero del mouse en relación con la posición del último evento mousemove (en-US).
MouseEvent.movementY (en-US) Read only: La coordenada Y del puntero del mouse en relación con la posición del último evento mousemove (en-US).
MouseEvent.offsetX (en-US) Read only: La coordenada X del puntero del mouse en relación con la posición del borde del relleno del nodo de destino.
MouseEvent.offsetY (en-US) Read only: La coordenada Y del puntero del mouse en relación con la posición del borde del relleno del nodo de destino.
MouseEvent.pageX Read only: La coordenada X del puntero del mouse en relación con todo el documento.
MouseEvent.pageY (en-US) Read only: La coordenada Y del puntero del mouse en relación con todo el documento.
MouseEvent.relatedTarget (en-US) Read only: El objetivo secundario del evento, si lo hay.
MouseEvent.screenX (en-US) Read only: La coordenada X del puntero del mouse en coordenadas globales (pantalla).
MouseEvent.screenY (en-US) Read only: La coordenada Y del puntero del mouse en coordenadas globales (pantalla).
MouseEvent.shiftKey Read only: Devuelve true si la tecla shift estaba presionada cuando se activó el evento del mouse.
MouseEvent.mozInputSource (en-US) Non-standard Read only: El tipo de dispositivo que generó el evento (una de las constantes MOZ_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.webkitForce (en-US) Non-standard Read only: La cantidad de presión aplicada al hacer clic.
MouseEvent.x (en-US) Read only: Alias para MouseEvent.clientX (en-US).
MouseEvent.y (en-US) Read only: Alias para MouseEvent.clientY (en-US).

Métodos de instancia

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

MouseEvent.getModifierState() (en-US): Devuelve el estado actual de la tecla modificadora especificada. Consulte KeyboardEvent.getModifierState() (en-US) para obtener más información.
MouseEvent.initMouseEvent() Obsoleto: Inicializa el valor de un MouseEvent 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étodo EventTarget.dispatchEvent().

HTML

html

<p>
  <label><input type="checkbox" id="checkbox" /> Comprobado</label>
</p>
<p>
  <button id="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

BCD tables only load in the browser

Véase también

Su padre directo, UIEvent
PointerEvent (en-US): Para eventos de puntero avanzados, incluido multitáctil