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 ⁨2015年7月⁩.

pointer-events 属性は、要素がマウスイベントの対象となるかどうか、またはそのタイミングを定義するための表示属性です。

メモ: プレゼンテーション属性であるため、 pointer-events には対応する CSS プロパティ pointer-events があります。両方が指定された場合、 CSS プロパティの方が優先されます。

この属性は、次の SVG 要素で使用することができます。

例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!--
  円は常にマウスイベントに介入します。
  長方形の色を変更するには、円の外側をクリックする必要があります。
  -->
  <rect x="0" y="0" height="10" width="10" fill="black" />
  <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePainted" />

  <!--
  下記の円は、マウスイベントを捕捉することはありません。
  円をクリックしても、円の下にある長方形をクリックしても、長方形の色は変化します。
  -->
  <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) => {
  // #000000 と #FFFFFF の間でランダムな色を拾う
  const color = Math.round(Math.random() * 0xffffff);

  // CSS の要件に合わせて色の書式化をする
  const fill = `#${color.toString(16).padStart(6, "0")}`;

  // 実際にクリックした要素に色を適用
  e.target.style.fill = fill;
});

使用上の注意

値	`bounding-box` \| `visiblePainted` \| `visibleFill` \| `visibleStroke` \| `visible` \| `painted` \| `fill` \| `stroke` \| `all` \| `none`
既定値	`visiblePainted`
アニメーション	可