Element: dblclick-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das dblclick-Ereignis wird ausgelöst, wenn die Taste eines Zeigegeräts (beispielsweise die primäre Maustaste) doppelt angeklickt wird. Das bedeutet, dass innerhalb sehr kurzer Zeit zweimal schnell hintereinander auf dasselbe Element geklickt wird.
dblclick wird nach zwei click-Ereignissen ausgelöst (und damit nach zwei Paaren von mousedown- und mouseup-Ereignissen).
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("dblclick", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
ondblclick = (event) => { }
Ereignistyp
Ein MouseEvent. Es erbt von UIEvent und Event.
Beispiele
Dieses Beispiel ändert die Größe einer Karte, wenn Sie darauf doppelklicken.
HTML
<aside>
<h3>My Card</h3>
<p>Double click to resize this object.</p>
</aside>
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);
}
JavaScript
const card = document.querySelector("aside");
card.addEventListener("dblclick", (e) => {
card.classList.toggle("large");
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # dblclick |
| HTML # handler-ondblclick |