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`
アニメーション	可