MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

L'événement click est déclenché lorsque le bouton d'un dispositif de pointage (habituellement une souris) est pressé puis relâché sur un seul élément.

Informations générales

Spécification
DOM L3
Interface
MouseEvent
Propagation
Oui
Annulable
Oui
Cible
Element
Action par défaut
Varie

Propriétés

Propriété Type Description
target Lecture seule EventTarget The event target (the topmost target in the DOM tree).
type Lecture seule DOMString The type of event.
bubbles Lecture seule Boolean Whether the event normally bubbles or not
cancelable Lecture seule Boolean Whether the event is cancellable or not?
view Lecture seule WindowProxy document.defaultView (window of the document)
detail Lecture seule long (float) Nombre de clics consécutifs survenus dans un court laps de temps, incrémenté par un.
currentTarget Lecture seule EventTarget The node that had the event listener attached.
relatedTarget Lecture seule EventTarget For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX Lecture seule long The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Lecture seule long The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX Lecture seule long The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Lecture seule long The Y coordinate of the mouse pointer in local (DOM content) coordinates.
button Lecture seule unsigned short The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons Lecture seule unsigned short The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure Lecture seule float The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey Lecture seule boolean true if the control key was down when the event was fired. false otherwise.
shiftKey Lecture seule boolean true if the shift key was down when the event was fired. false otherwise.
altKey Lecture seule boolean true if the alt key was down when the event was fired. false otherwise.
metaKey Lecture seule boolean true if the meta key was down when the event was fired. false otherwise.

Exemple

<div id="test"></div>

<script>
  document.getElementById("test").addEventListener("click", function( event ) {
    // Affiche le compte courant de clics à l'intérieur de la div cliquée
    event.target.innerHTML = "click count: " + event.detail;
  }, false);
</script>

Compatibilités navigateur

Internet Explorer

Internet Explorer 8 & 9 souffre d'un bug où les éléments avec un calcul background-color transparent qui sont superposés au-dessus d'autres éléments ne recevront pas d'événements de clic. Tous les événements de clic seront lancés sur les éléments sous-jacents. Voir l'exemple live pour une démonstration.

Solutions de contournement connues pour ce bug:

Safari Mobile

Safari Mobile 7.0+ (et probablement les versions antérieures aussi) souffre d'un bug où les événements de clic ne sont pas déclenchés sur des éléments qui ne sont pas typiquement interactifs (Par exemple <div>) et qui n'ont pas non plus d'auditeurs d'événements directement attachés aux éléments (c'est à dire event delegation est présentement utilisé). Voir l'exemple live pour une démonstration. Voir aussi la documentation de Safari sur la création d'éléments cliquables et définition d'un "élément cliquable".

Solutions de contournement connues pour ce bug::

  • Définir cursor: pointer; sur l'élément ou l'un de ses ancêtres.
  • Ajouter un faux attribut onclick="void(0)" sur l'élément ou l'un de ses ancêtres jusqu'à <body> non compris.
  • Utiliser un élément typiquement interactif  (par exemple <a>) au lieu d'un élément qui ne l'est pas (comme <div>).
  • Arrêter d'utiliser event delegation.

Safari Mobile considèere les éléments suivants comme étant typiquement interactifs (et donc ne sont pas affecté par le bug):

  • <a> (mais doit avoir un attribut href)
  • <area> (mais doit avoir un attribut href)
  • <button>
  • <img>
  • <input>
  • <label> (mais doit être associé à un formulaire contrôle)
  • <textarea>
  • Cette liste est incomplète; Vous pouvez aider MDN en poussant les tests et les recherches plus loin et agrandir la liste.

Bureau Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Support basique (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
Sur les éléments de formulaire désactivés (Oui)[1] Pas de support (Oui)[2] Pas de support (Oui)[1] ?
Mobile Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support basique ? ? ? ? ?
Sur les éléments de formulaire désactivés ? ? ? ? ?

[1] Fonctionne seulement pour l'élément <textarea> et quelques éléments <input>.

[2] Internet Explorer déclenche l'événement click seulement sur les éléments <input> de type checkbox ou radio lorsqu'ils sont double-cliqués.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : necraidan, Kalwyn
 Dernière mise à jour par : necraidan,