From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/element/click_event/index.html | 155 ++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 files/fr/web/api/element/click_event/index.html (limited to 'files/fr/web/api/element/click_event') diff --git a/files/fr/web/api/element/click_event/index.html b/files/fr/web/api/element/click_event/index.html new file mode 100644 index 0000000000..c290291e10 --- /dev/null +++ b/files/fr/web/api/element/click_event/index.html @@ -0,0 +1,155 @@ +--- +title: 'Element : évènement click' +slug: Web/API/Element/click_event +tags: + - API + - DOM + - Element + - Reference + - click +translation_of: Web/API/Element/click_event +--- +
{{APIRef}}
+ +

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 DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onclick", "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 {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés.

+ +

Notes d'utilisation

+ +

L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est click) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "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 {{cssxref("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. {{HTMLElement("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 :

+ + + +

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 ({{HTMLElement("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.

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-click')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-click', 'click')}}{{Spec2('DOM3 Events')}}
{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}{{Spec2('DOM2 Events')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Element.click_event")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf