Element : évènement click
Baseline
Large disponibilité
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
Un élément reçoit un évènement click lorsque l'une des situations suivantes se produit :
-
Un bouton d'un dispositif de pointage (comme le bouton principal d'une souris) est à la fois pressé et relâché alors que le pointeur se trouve à l'intérieur de l'élément.
-
Un geste tactile est effectué sur l'élément.
-
Toute interaction utilisateur·ice équivalente à un clic, comme appuyer sur la touche Espace ou Entrer lorsque l'élément est sélectionné. Notez que cela ne s'applique qu'aux éléments avec un gestionnaire d'évènements clavier par défaut, et exclut donc les autres éléments qui ont été rendus sélectionnables en définissant l'attribut
tabindex. -
Si le bouton est pressé sur un élément et que le pointeur est déplacé en dehors de l'élément avant que le bouton ne soit relâché, l'évènement est déclenché sur l'ancêtre le plus spécifique qui contenait les deux éléments.
click se déclenche après que les évènements mousedown et mouseup se soient produits, dans cet ordre.
L'évènement est indépendant du dispositif — cela signifie qu'il peut être activé par le toucher, le clavier, la souris et tout autre mécanisme fourni par la technologie d'assistance.
Syntaxe
Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété gestionnaire d'évènements.
addEventListener("click", (event) => { })
onclick = (event) => { }
Type d'évènement
Un objet PointerEvent. Hérite de MouseEvent.
Note :
Dans les versions antérieures de la spécification, le type d'évènement pour cet évènement était un MouseEvent. Consultez la compatibilité des navigateurs pour plus d'informations.
Notes d'utilisation
L'objet PointerEvent passé au gestionnaire d'évènements pour click a sa propriété detail définie sur le nombre de fois que la target a été cliqué. En d'autres termes, detail est 2 pour un double-clic, 3 pour un triple-clic, et ainsi de suite. Ce compteur se réinitialise après un court intervalle sans clics ; la durée exacte de cet intervalle peut varier d'un navigateur à l'autre et selon les plateformes. L'intervalle est également susceptible d'être affecté par les préférences de l'utilisateur·ice ; par exemple, les options d'accessibilité peuvent prolonger cet intervalle pour faciliter les clics multiples avec des interfaces adaptatives.
Exemples
Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML (<button>).
HTML
<button>Cliquer ici</button>
JavaScript
const bouton = document.querySelector("button");
bouton.addEventListener("click", (event) => {
bouton.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 est remis à zéro.
Spécifications
| Spécification |
|---|
| Pointer Events # click |
| HTML # handler-onclick |
Compatibilité des navigateurs
Voir aussi
- Apprendre : Introduction aux évènements
- L'évènement
auxclick - L'évènement
contextmenu - L'évènement
dblclick - L'évènement
mousedown - L'évènement
mouseup - L'évènement
pointerdown - L'évènement
pointerup