Element : évènement click

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 élméents 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

<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

Spécification État
UI Events Version de travail
Document Object Model (DOM) Level 3 Events Specification
La définition de 'click' dans cette spécification.
Obsolete
Document Object Model (DOM) Level 2 Events Specification
La définition de 'click' dans cette spécification.
Obsolete

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
click eventChrome Support complet 1Edge Support complet 12Firefox Support complet 6
Notes
Support complet 6
Notes
Notes Beginning in Firefox 68, Firefox no longer incorrectly sends a click event for buttons other than the primary mouse button; previouly, there were circumstances in which this would occur. One example: middle-clicking a link would send a click to the document's <html> element.
IE Support complet 9Opera Support complet 11.6Safari Support complet 3WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 6Opera Android Support complet 12.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0
On disabled form elementsChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes Only works for <textarea> elements and some <input> element types.
Edge Support complet 79
Notes
Support complet 79
Notes
Notes Only works for <textarea> elements and some <input> element types.
Firefox Aucun support NonIE Support complet Oui
Notes
Support complet Oui
Notes
Notes Internet Explorer only triggers the click event on <input> elements of type checkbox or radio when the element is double-clicked.
Opera Support complet Oui
Notes
Support complet Oui
Notes
Notes Only works for <textarea> elements and some <input> element types.
Safari ? WebView Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Only works for <textarea> elements and some <input> element types.
Chrome Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Only works for <textarea> elements and some <input> element types.
Firefox Android Aucun support NonOpera Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Only works for <textarea> elements and some <input> element types.
Safari iOS ? Samsung Internet Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Only works for <textarea> elements and some <input> element types.

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi