ShadowRoot: elementFromPoint() Methode
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
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
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.
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.