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⁩.

Das dblclick-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.

Das dblclick-Ereignis wird nach zwei click-Ereignissen (und in der Folge, nach zwei Paaren von mousedown- und mouseup-Ereignissen) ausgelöst.

Syntax

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

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

ondblclick = (event) => { }

Ereignistyp

Ein MouseEvent. Erbt von UIEvent und Event.

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften ihrer Eltern, UIEvent und Event.

MouseEvent.altKey Schreibgeschützt: Gibt true zurück, wenn die alt-Taste gedrückt war, als das Mausereignis ausgelöst wurde.
MouseEvent.button Schreibgeschützt: Die Nummer der Taste, die gedrückt wurde (falls zutreffend), als das Mausereignis ausgelöst wurde.
MouseEvent.buttons Schreibgeschützt: Die Tasten, die gedrückt wurden (falls vorhanden), als das Mausereignis ausgelöst wurde.
MouseEvent.clientX Schreibgeschützt: Die X-Koordinate des Mauszeigers in Viewport-Koordinaten.
MouseEvent.clientY Schreibgeschützt: Die Y-Koordinate des Mauszeigers in Viewport-Koordinaten.
MouseEvent.ctrlKey Schreibgeschützt: Gibt true zurück, wenn die control-Taste gedrückt war, als das Mausereignis ausgelöst wurde.
MouseEvent.layerX Nicht standardisiert Schreibgeschützt: Gibt die horizontale Koordinate des Ereignisses relativ zur aktuellen Ebene zurück.
MouseEvent.layerY Nicht standardisiert Schreibgeschützt: Gibt die vertikale Koordinate des Ereignisses relativ zur aktuellen Ebene zurück.
MouseEvent.metaKey Schreibgeschützt: Gibt true zurück, wenn die meta-Taste gedrückt war, als das Mausereignis ausgelöst wurde.
MouseEvent.movementX Schreibgeschützt: Die X-Koordinate des Mauszeigers relativ zur Position des letzten mousemove-Ereignisses.
MouseEvent.movementY Schreibgeschützt: Die Y-Koordinate des Mauszeigers relativ zur Position des letzten mousemove-Ereignisses.
MouseEvent.offsetX Schreibgeschützt: Die X-Koordinate des Mauszeigers relativ zur Position des Pufferkantenrandes des Zielknotens.
MouseEvent.offsetY Schreibgeschützt: Die Y-Koordinate des Mauszeigers relativ zur Position des Pufferkantenrandes des Zielknotens.
MouseEvent.pageX Schreibgeschützt: Die X-Koordinate des Mauszeigers relativ zum gesamten Dokument.
MouseEvent.pageY Schreibgeschützt: Die Y-Koordinate des Mauszeigers relativ zum gesamten Dokument.
MouseEvent.relatedTarget Schreibgeschützt: Das Sekundärziel des Ereignisses, falls vorhanden.
MouseEvent.screenX Schreibgeschützt: Die X-Koordinate des Mauszeigers in Bildschirmkoordinaten.
MouseEvent.screenY Schreibgeschützt: Die Y-Koordinate des Mauszeigers in Bildschirmkoordinaten.
MouseEvent.shiftKey Schreibgeschützt: Gibt true zurück, wenn die shift-Taste gedrückt war, als das Mausereignis ausgelöst wurde.
MouseEvent.mozInputSource Nicht standardisiert Schreibgeschützt: Der Typ des Geräts, das das Ereignis erzeugt hat (einer der MOZ_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.webkitForce Nicht standardisiert Schreibgeschützt: Die Stärke des Drucks beim Klicken.
MouseEvent.x Schreibgeschützt: Alias für MouseEvent.clientX.
MouseEvent.y Schreibgeschützt: Alias für MouseEvent.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