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 :
-
Pour IE9 :
- Utiliser
background-color
: rgba(0,0,0,0)
- Appliquer
opacity
: 0
et une valeur explicite pourbackground-color
qui ne soit pastransparent
- Utiliser
-
Pour IE8 et IE9 : appliquer
filter: alpha(opacity=0);
et une valeur explicite pourbackground-color
qui ne soit pastransparent
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
<button>Cliquer ici</button>
JavaScript
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
-
D'autres évènements connexes