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` (en-US) 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 pour `background-color` qui ne soit pas `transparent`
* Pour IE8 et IE9 : appliquer `filter: alpha(opacity=0);` et une valeur explicite pour `background-color` qui ne soit pas `transparent`
### 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) :

* `<a>` (tant qu'il a un attribut `href`)
* `<area>` (tant qu'il a un attribut `href`)
* `<button>`
* `<img>`
* `<input>`
* `<label>` (tant qu'il est associé à un formulaire)
* `<textarea>`
* *Liste à compléter.*
Exemples
--------

Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML (`<button>`).

### HTML


```html
<button>Cliquer ici</button>
```

### JavaScript


```js
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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Une introduction aux évènements
* D'autres évènements connexes
    + `mouseup`
    + `mousedown`
    + `mousemove`
    + `dblclick`
    + `mouseout`
    + `mouseover`
    + `mouseenter`
    + `mouseleave`
    + `contextmenu`