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.
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. -
El número de botón que se presionó (si corresponde) cuando se activó el evento del mouse.
-
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 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.
-
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
.
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
<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