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).

Event

UIEvent

MouseEventConstructor
-----------

`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


```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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

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