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 Ereignis dblclick wird ausgelöst, wenn die Taste eines Zeigegeräts (z. B. die primäre Maustaste) doppelt angeklickt wird, also wenn sie innerhalb sehr kurzer Zeit zweimal schnell auf demselben Element betätigt 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():
js
addEventListener("dblclick", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft des Interfaces zuweisen:
js
ondblclick = (event) => { }
Ereignistyp
Ein MouseEvent. Erbt von UIEvent und Event.
Beispiele
Dieses Beispiel ändert die Größe einer Karte, wenn Sie darauf doppelklicken.
JavaScript
js
const card = document.querySelector("aside");
card.addEventListener("dblclick", (e) => {
card.classList.toggle("large");
});
HTML
html
<aside>
<h3>My Card</h3>
<p>Double click to resize this object.</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);
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # dblclick |
| HTML # handler-ondblclick |