Element : évènement dblclick

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 laps de temps très court).

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

Se propage/remonte dans le DOM Oui
Annulable Oui
Interface MouseEvent
Propriété pour la gestion d'évènements ondblclick

Exemples

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

JavaScript

js
const card = document.querySelector("aside");

card.addEventListener("dblclick", function (e) {
  card.classList.toggle("large");
});

HTML

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

CSS

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

.large {
  transform: scale(1.3);
}

Résultat

Spécifications

Specification
UI Events
# event-type-dblclick
HTML
# handler-ondblclick

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi