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.

Event UIEvent MouseEvent

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

js
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