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 Juli 2015.
Das pointer-events Attribut ist ein Präsentationsattribut, das erlaubt zu definieren, ob oder wann ein Element das Ziel eines Mausereignisses sein kann.
Hinweis: Als Präsentationsattribut hat pointer-events auch ein entsprechendes CSS-Eigenschaftsgegenstück: pointer-events. Wenn beides angegeben ist, hat die CSS-Eigenschaft Vorrang.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Beispiel
html
<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> js
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; }); Nutzungshinweise
| Wert | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none |
|---|---|
| Standardwert | visiblePainted |
| Animierbar | Ja |
Für eine detaillierte Erklärung jedes möglichen Werts siehe die CSS pointer-events Dokumentation.
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |
Browser-Kompatibilität
Siehe auch
- CSS
pointer-eventsEigenschaft