From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- files/fr/web/api/element/dblclick_event/index.html | 119 --------------------- files/fr/web/api/element/dblclick_event/index.md | 119 +++++++++++++++++++++ 2 files changed, 119 insertions(+), 119 deletions(-) delete mode 100644 files/fr/web/api/element/dblclick_event/index.html create mode 100644 files/fr/web/api/element/dblclick_event/index.md (limited to 'files/fr/web/api/element/dblclick_event') diff --git a/files/fr/web/api/element/dblclick_event/index.html b/files/fr/web/api/element/dblclick_event/index.html deleted file mode 100644 index 9f82b49bd9..0000000000 --- a/files/fr/web/api/element/dblclick_event/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: 'Element : évènement dblclick' -slug: Web/API/Element/dblclick_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - dblclick -translation_of: Web/API/Element/dblclick_event ---- -
{{APIRef}}
- -

L'évènement dblclick se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).

- -

dblclick se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}
- -

Exemples

- -

Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.

- -

JavaScript

- -
const card = document.querySelector('aside');
-
-card.addEventListener('dblclick', function (e) {
-  card.classList.toggle('large');
-});
- -

HTML

- -
<aside>
-  <h3>Une tuile</h3>
-  <p>Double-cliquer pour redimensionner cet objet.</p>
-</aside>
- -

CSS

- -
aside {
-  background: #fe9;
-  border-radius: 1em;
-  display: inline-block;
-  padding: 1em;
-  transform: scale(.9);
-  transform-origin: 0 0;
-  transition: transform .6s;
-}
-
-.large {
-  transform: scale(1.3);
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 700, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/dblclick_event/index.md b/files/fr/web/api/element/dblclick_event/index.md new file mode 100644 index 0000000000..9f82b49bd9 --- /dev/null +++ b/files/fr/web/api/element/dblclick_event/index.md @@ -0,0 +1,119 @@ +--- +title: 'Element : évènement dblclick' +slug: Web/API/Element/dblclick_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - dblclick +translation_of: Web/API/Element/dblclick_event +--- +
{{APIRef}}
+ +

L'évènement dblclick se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).

+ +

dblclick se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}
+ +

Exemples

+ +

Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.

+ +

JavaScript

+ +
const card = document.querySelector('aside');
+
+card.addEventListener('dblclick', function (e) {
+  card.classList.toggle('large');
+});
+ +

HTML

+ +
<aside>
+  <h3>Une tuile</h3>
+  <p>Double-cliquer pour redimensionner cet objet.</p>
+</aside>
+ +

CSS

+ +
aside {
+  background: #fe9;
+  border-radius: 1em;
+  display: inline-block;
+  padding: 1em;
+  transform: scale(.9);
+  transform-origin: 0 0;
+  transition: transform .6s;
+}
+
+.large {
+  transform: scale(1.3);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 700, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

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

+ +

Voir aussi

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