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

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;
});

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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pointer-events

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch