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.

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

onclick = (event) => {};

Tipo de evento

Un MouseEvent. Hereda de Event.

Propiedades 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

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