Element: dblclick Ereignis

Baseline Widely available

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

Dasdblclick-Ereignis wird ausgelöst, wenn eine Taste eines Zeigegeräts (wie die Primärtaste einer Maus) doppelt geklickt wird; das heißt, wenn diese innerhalb eines sehr kurzen Zeitraums zweimal schnell auf ein einzelnes Element geklickt wird.

Dasdblclick-Ereignis wird nach zweiclick-Ereignissen (und in der Folge, nach zwei Paaren vonmousedown- undmouseup-Ereignissen) ausgelöst.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

addEventListener("dblclick", (event) => { })ondblclick = (event) => { }

Ereignistyp

EinMouseEvent. Erbt vonUIEvent undEvent.

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften ihrer Eltern,UIEvent undEvent.

MouseEvent.altKeySchreibgeschützt: Gibttrue zurück, wenn diealt-Taste gedrückt war, als das Mausereignis ausgelöst wurde.
MouseEvent.buttonSchreibgeschützt: Die Nummer der Taste, die gedrückt wurde (falls zutreffend), als das Mausereignis ausgelöst wurde.
MouseEvent.buttonsSchreibgeschützt: Die Tasten, die gedrückt wurden (falls vorhanden), als das Mausereignis ausgelöst wurde.
MouseEvent.clientXSchreibgeschützt: Die X-Koordinate des Mauszeigers inViewport-Koordinaten.
MouseEvent.clientYSchreibgeschützt: Die Y-Koordinate des Mauszeigers inViewport-Koordinaten.
MouseEvent.ctrlKeySchreibgeschützt: Gibttrue zurück, wenn diecontrol-Taste gedrückt war, als das Mausereignis ausgelöst wurde.
MouseEvent.layerXNicht standardisiertSchreibgeschützt: Gibt die horizontale Koordinate des Ereignisses relativ zur aktuellen Ebene zurück.
MouseEvent.layerYNicht standardisiertSchreibgeschützt: Gibt die vertikale Koordinate des Ereignisses relativ zur aktuellen Ebene zurück.
MouseEvent.metaKeySchreibgeschützt: Gibttrue zurück, wenn diemeta-Taste gedrückt war, als das Mausereignis ausgelöst wurde.
MouseEvent.movementXSchreibgeschützt: Die X-Koordinate des Mauszeigers relativ zur Position des letztenmousemove-Ereignisses.
MouseEvent.movementYSchreibgeschützt: Die Y-Koordinate des Mauszeigers relativ zur Position des letztenmousemove-Ereignisses.
MouseEvent.offsetXSchreibgeschützt: Die X-Koordinate des Mauszeigers relativ zur Position des Pufferkantenrandes des Zielknotens.
MouseEvent.offsetYSchreibgeschützt: Die Y-Koordinate des Mauszeigers relativ zur Position des Pufferkantenrandes des Zielknotens.
MouseEvent.pageXSchreibgeschützt: Die X-Koordinate des Mauszeigers relativ zum gesamten Dokument.
MouseEvent.pageYSchreibgeschützt: Die Y-Koordinate des Mauszeigers relativ zum gesamten Dokument.
MouseEvent.relatedTargetSchreibgeschützt: Das Sekundärziel des Ereignisses, falls vorhanden.
MouseEvent.screenXSchreibgeschützt: Die X-Koordinate des Mauszeigers inBildschirmkoordinaten.
MouseEvent.screenYSchreibgeschützt: Die Y-Koordinate des Mauszeigers inBildschirmkoordinaten.
MouseEvent.shiftKeySchreibgeschützt: Gibttrue zurück, wenn dieshift-Taste gedrückt war, als das Mausereignis ausgelöst wurde.
MouseEvent.mozInputSourceNicht standardisiertSchreibgeschützt: Der Typ des Geräts, das das Ereignis erzeugt hat (einer derMOZ_SOURCE_*-Konstanten). Dies ermöglicht Ihnen beispielsweise zu bestimmen, ob ein Mausereignis von einer tatsächlichen Maus oder von einem Touch-Ereignis erzeugt wurde (was die Genauigkeit der Interpretation der dem Ereignis zugeordneten Koordinaten beeinflussen könnte).
MouseEvent.webkitForceNicht standardisiertSchreibgeschützt: Die Stärke des Drucks beim Klicken.
MouseEvent.xSchreibgeschützt: Alias fürMouseEvent.clientX.
MouseEvent.ySchreibgeschützt: Alias fürMouseEvent.clientY.

Beispiele

Dieses Beispiel ändert die Größe einer Karte, wenn Sie doppelt darauf klicken.

JavaScript

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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen •Fehler mit dieser Übersetzung melden

Movatterモバイル変換

Element: dblclick Ereignis

Help improve MDN