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.

En savoir plus
Voir la compatibilité complète

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.

Propriétés de l'évènement

Cette interface hérite des propriétés de MouseEvent et Event.

PointerEvent.altitudeAngle Lecture seule: Représente l'angle entre l'axe d'un transducteur (un pointeur ou un stylet) et le plan X-Y de l'écran d'un dispositif.
PointerEvent.azimuthAngle Lecture seule: Représente l'angle entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (pointeur ou stylet) et l'axe Y.
PointerEvent.pointerId Lecture seule: Identifiant unique du pointeur à l'origine de l'évènement.
PointerEvent.width Lecture seule: La largeur (amplitude sur l'axe X), en pixels CSS, de la géométrie de contact du pointeur.
PointerEvent.height Lecture seule: La hauteur (amplitude sur l'axe Y), en pixels CSS, de la géométrie de contact du pointeur.
PointerEvent.pressure Lecture seule: La pression normalisée de l'entrée du pointeur comprise entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que le matériel est capable de détecter.
PointerEvent.tangentialPressure Lecture seule: La pression tangentielle normalisée de l'entrée du pointeur (également appelée « pression du canon » ou contrainte cylindrique ^(angl.)) comprise entre -1 et 1, où 0 représente la position neutre du contrôle.
PointerEvent.tiltX Lecture seule: L'angle plan (en degrés, compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du pointeur (par exemple, un stylet) et l'axe Y.
PointerEvent.tiltY Lecture seule: L'angle plan (en degrés, compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du pointeur (par exemple, un stylet) et l'axe X.
PointerEvent.twist Lecture seule: La rotation dans le sens des aiguilles d'une montre du pointeur (par exemple, un stylet) autour de son axe principal en degrés, avec une valeur comprise entre 0 et 359.
PointerEvent.pointerType Lecture seule: Indique le type de dispositif à l'origine de l'évènement (souris, stylet, tactile, etc.).
PointerEvent.isPrimary Lecture seule: Indique si le pointeur représente le pointeur principal de ce type de pointeur.

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

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

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 30 juil. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu