Element : évènement dblclick

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilité complète

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

dblclick est déclenché après deux évènements click (et par extension, après deux paires d'évènements mousedown et mouseup).

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

addEventListener("dblclick", (event) => { })

ondblclick = (event) => { }

const tuile = document.querySelector("aside");

tuile.addEventListener("dblclick", (e) => {
  tuile.classList.toggle("large");
});

HTML

html

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

CSS

css

aside {
  background: #ffee99;
  border-radius: 1em;
  display: inline-block;
  padding: 1em;
  transform: scale(0.9);
  transform-origin: 0 0;
  transition: transform 0.6s;
  user-select: none;
}

.large {
  transform: scale(1.3);
}