MouseEvent

Baseline Widely available

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

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, mouseup, 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().

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

Constructor

MouseEvent(): Crea un objeto MouseEvent.

Propiedades estáticas

MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN Non-standard Read only: Fuerza mínima necesaria para un clic normal.
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN 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 Read only: Devuelve true si la tecla alt estaba presionada cuando se activó el evento del mouse.
MouseEvent.button Read only: El número de botón que se presionó (si corresponde) cuando se activó el evento del mouse.
MouseEvent.buttons Read only: Los botones que se presionaron (si los hay) cuando se activó el evento del mouse.
MouseEvent.clientX Read only: La coordenada X del puntero del mouse en coordenadas locales (contenido DOM).
MouseEvent.clientY Read only: La coordenada Y del puntero del mouse en coordenadas locales (contenido DOM).
MouseEvent.ctrlKey Read only: Devuelve true si la tecla control estaba presionada cuando se activó el evento del mouse.
MouseEvent.layerX Non-standard Read only: Devuelve la coordenada horizontal del evento relativa a la capa actual.
MouseEvent.layerY Non-standard Read only: Devuelve la coordenada vertical del evento relativa a la capa actual.
MouseEvent.metaKey Read only: Devuelve true si la tecla meta estaba presionada cuando se activó el evento del mouse.
MouseEvent.movementX Read only: La coordenada X del puntero del mouse en relación con la posición del último evento mousemove.
MouseEvent.movementY Read only: La coordenada Y del puntero del mouse en relación con la posición del último evento mousemove.
MouseEvent.offsetX 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 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 Read only: La coordenada Y del puntero del mouse en relación con todo el documento.
MouseEvent.relatedTarget Read only: El objetivo secundario del evento, si lo hay.
MouseEvent.screenX Read only: La coordenada X del puntero del mouse en coordenadas globales (pantalla).
MouseEvent.screenY 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 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 Non-standard Read only: La cantidad de presión aplicada al hacer clic.
MouseEvent.x Read only: Alias para MouseEvent.clientX.
MouseEvent.y Read only: Alias para MouseEvent.clientY.

Métodos de instancia

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

MouseEvent.getModifierState(): Devuelve el estado actual de la tecla modificadora especificada. Consulte KeyboardEvent.getModifierState() 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: Para eventos de puntero avanzados, incluido multitáctil