Element : évènement 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.

L'évènement click est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.

Se propage/remonte dans le DOM Oui
Annulable Oui
Interface MouseEvent
Propriété pour la gestion d'évènement onclick

Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments.

click est déclenché après que les évènements mousedown et mouseup aient été déclenchés.

Notes d'utilisation

L'objet MouseEvent, passé au gestionnaire d'évènement (lorsque l'évènement est click) possède une propriété detail qui indique le nombre de fois où la cible (target) a été cliquée. Autrement dit, detail vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité).

Internet Explorer

Internet Explorer 8 & 9 souffrent d'un bug où les éléments avec une background-color calculée qui vaut transparent qui recouvrent d'autres éléments ne recevront pas d'évènements click. Les évènements click toucheront les éléments en dessous à la place.

Quelques méthodes de contournement pour ce bug :

Safari Mobile

Safari Mobile 7.0+ (et antérieures) souffre d'un bug indiquant que les évènements click ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. <div>) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir la documentation de Safari sur le fait de rendre les éléments cliquables et la définition d'un élément cliquable.

Méthodes de contournement connues :

  • Ajouter cursor: pointer; sur l'élément ou l'un des ancêtres.
  • Ajouter un attribut onclick="void(0)" à l'élément ou à l'un des ancêtres (tant que ce n'est pas <body>).
  • Utiliser un élément interactif (ex. <a>) plutôt qu'un élément généralement non-interactif (ex. <div>).
  • Ne pas utiliser la délégation d'évènement pour click.

Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) :

Exemples

Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML (<button>).

HTML

html
<button>Cliquer ici</button>

JavaScript

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

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

Résultat

Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro.

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi