pointer-events
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das Attribut pointer-events
ist ein Präsentationsattribut, das definiert, ob oder wann ein Element Ziel eines Mausereignisses sein kann.
Hinweis:
Als Präsentationsattribut hat pointer-events
auch ein Gegenstück als CSS-Eigenschaft: pointer-events
. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.
Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:
Beispiel
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
<!--
The circle will always intercept the mouse event.
To change the color of the rect underneath you have
to click outside the circle
-->
<rect x="0" y="0" height="10" width="10" fill="black" />
<circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePainted" />
<!--
The circle below will never catch a mouse event.
The rect underneath will change color whether you
are clicking on the circle or the rect itself
-->
<rect x="10" y="0" height="10" width="10" fill="black" />
<circle cx="15" cy="5" r="4" fill="white" pointer-events="none" />
</svg>
window.addEventListener("mouseup", (e) => {
// Let's pick a random color between #000000 and #FFFFFF
const color = Math.round(Math.random() * 0xffffff);
// Let's format the color to fit CSS requirements
const fill = `#${color.toString(16).padStart(6, "0")}`;
// Let's apply our color in the
// element we actually clicked on
e.target.style.fill = fill;
});
Hinweise zur Verwendung
Wert |
bounding-box | visiblePainted |
visibleFill | visibleStroke |
visible | painted | fill |
stroke | all | none
|
---|---|
Standardwert | visiblePainted |
Animierbar | Ja |
Für eine detaillierte Erklärung der möglichen Werte werfen Sie einen Blick in die CSS-Dokumentation zu pointer-events
.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
pointer-events |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- CSS
pointer-events
-Eigenschaft