Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Element : évènement dblclick
Baseline
Widely available
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.
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
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(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
Chargement...
Voir aussi
- Une introduction aux évènements
- D'autres évènements connexes