Element: Evento click
=====================

Un elemento recibe un evento **`click`** (clic) cuando se presiona y se suelta un botón del dispositivo señalador (como el botón principal del mouse) mientras el puntero se encuentra dentro del elemento.

Si se presiona el botón en un elemento y el puntero se mueve fuera del elemento antes de soltar el botón, el evento se activa en el elemento antecesor más específico que contenía ambos elementos.

`click` se activa después de que se hayan activado los eventos `mousedown` y `mouseup` (en-US), en ese orden.

Sintaxis
--------

Utilice el nombre del evento en métodos como `addEventListener()`, o establezca una propiedad de manejador de eventos.


```js
addEventListener("click", (event) => {});

onclick = (event) => {};
```

Tipo de evento
--------------

Un `MouseEvent`. Hereda de `Event`.

Event

UIEvent

MouseEventPropiedades del evento
----------------------

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

Notas de uso
------------

El objeto `MouseEvent` pasado al manejador de eventos para `click` tiene su propiedad `detail` (en-US) establecida en el número de veces que se hizo clic en `target`. En otras palabras, `detail` será 2 para un doble clic, 3 para un triple clic, y así sucesivamente. Este contador se restablece después de un breve intervalo sin que se produzcan clics; los detalles de la duración de ese intervalo pueden variar de un navegador a otro y entre plataformas. También es probable que el intervalo se vea afectado por las preferencias del usuario; por ejemplo, las opciones de accesibilidad pueden ampliar este intervalo para facilitar la realización de varios clics con interfaces adaptables.

Ejemplos
--------

Este ejemplo muestra el número de clics consecutivos en un `<button>`.

### HTML


```html
<button>Clic</button>
```

### JavaScript


```js
const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  button.textContent = `Recuento de clics: ${event.detail}`;
});
```

### Resultado

Intente hacer clics rápidos y repetidos en el botón para aumentar el número de clics. Si se toma un descanso entre clics, el conteo se restablecerá.

Especificaciones
----------------

| Specification |
| --- |
| UI Events # event-type-click |
| HTML Standard # handler-onclick |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Introducción a los eventos
* `auxclick` (en-US)
* `contextmenu` (en-US)
* `dblclick` (en-US)
* `mousedown`
* `mouseup` (en-US)
* `pointerdown` (en-US)
* `pointerup` (en-US)