pointer-events
pointer-events
属性是一个表示属性,允许定义元素何时或是否可以成为鼠标事件的目标。
注意:作为表示属性,pointer-events
可以用作 CSS 属性。
您可以将此属性与以下 SVG 元素一起使用
示例
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;
});
使用说明
值 |
bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none |
---|---|
默认值 | visiblePainted |
可动画化 | 是 |
有关每个可能值的详细解释,请查看 CSS pointer-events
文档。
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # PointerEventsProp |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。