Element : évènement dblclick

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(.9);
  transform-origin: 0 0;
  transition: transform .6s;
}

.large {
  transform: scale(1.3);
}

Résultat

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi