Element: Evento click

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.

* Some parts of this feature may have varying levels of support.

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 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 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 No estándar Read only: Devuelve la coordenada horizontal del evento relativa a la capa actual.
MouseEvent.layerY No estándar 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 de 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 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 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 No estándar 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 No estándar 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.

Notas de uso

El objeto MouseEvent pasado al manejador de eventos para click tiene su propiedad detail 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 # handler-onclick