ShadowRoot: elementFromPoint() Methode

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die elementFromPoint()-Methode, die auf dem ShadowRoot-Objekt verfügbar ist, gibt das Element zurück, das sich in der obersten Schicht des Shadow-DOM an den angegebenen Koordinaten relativ zum Ansichtsfenster (dem Shadow-DOM-Element auf der höchsten Ebene der Anzeige-Z-Reihenfolge, das Zeigerereignisse empfangen kann) befindet. Shadow-DOM-Elemente, die pointer-events auf none gesetzt haben, werden ignoriert.

Wenn der angegebene Punkt außerhalb der Grenzen des Shadow-DOM liegt, ist das Ergebnis undefined.

Syntax

js
elementFromPoint(x, y)

Parameter

x

Die horizontale Koordinate eines Punktes, relativ zum linken Rand des aktuellen Ansichtsfensters.

y

Die vertikale Koordinate eines Punktes, relativ zum oberen Rand des aktuellen Ansichtsfensters.

Rückgabewert

Ein Element; das oberste Shadow-DOM-Element, das an den angegebenen Koordinaten gefunden wird, falls vorhanden.

Beispiele

In diesem Beispiel definieren wir, vorausgesetzt, dass ein <template> im HTML vorhanden ist, ein <my-custom-element>. Wenn das hinzugefügte benutzerdefinierte Element die obere linke Ecke des Ansichtsfensters berührt oder ein Teil davon diese Ecke überlappt, erhält das Element, das an diesem Punkt die oberste Schicht in dem benutzerdefinierten Element ist, einen dünnen, gestrichelten roten Rahmen.

js
customElements.define(
  "my-custom-element",
  class extends HTMLElement {
    constructor() {
      super();
      const templateContent = document.getElementById(
        "my-custom-element-template",
      ).content;
      const sRoot = this.attachShadow({ mode: "open" });
      sRoot.appendChild(templateContent.cloneNode(true));

      // get the topmost element in the top left corner of the viewport
      const srElement = this.shadowRoot.elementFromPoint(0, 0);
      // apply a border to that element
      srElement.style.border = "1px dashed red";
    }
  },
);

Spezifikationen

Nicht Teil eines Standards.

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch