pointer-events属性是一个展示属性,用于定义元素是否或何时可能是鼠标事件的目标元素。
Note: 作为一个展示属性, pointer-events
可以被当做CSS属性使用.
html,body,svg { height:100% }
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- Circle元素将始终拦截鼠标事件。 为了改变较底部的的rect元素的颜色, 你需要点击rect元素在圆外的部分 --> <rect x="0" y="0" height="10" width="10" fill="black" /> <circle cx="5" cy="5" r="4" fill="white" pointer-events="visiblePoint" /> <!-- 下面的circle元素将永远不会获取到鼠标事件, 当你点击circle元素或者点击rect元素时, rect元素都会改变颜色 --> <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) // 将color变量的值按照css的要求进行格式化 const fill = '#' + color.toString(16).padStart(6,'0') // 将color变量设置的颜色应用到实际点击的元素上 e.target.style.fill = fill })
作为一个展示属性,他可以被很多元素使用,但和它紧密相关的只有下面的23个元素: <a>
, <circle>
, <clipPath>
, <defs>
, <ellipse>
, <foreignObject>
, <g>
, <image>
, <line>
, <marker>
, <mask>
, <path>
, <pattern>
, <polygon>
, <polyline>
, <rect>
, <svg>
, <switch>
, <symbol>
, <text>
, <textPath>
, <tspan>
, <use>
用法
值 | bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none |
---|---|
默认值 | visiblePainted |
是否可动画 | Yes |
为了详细了解每个可能的值,请参考CSS文档 pointer-events
.
浏览器兼容
此页浏览器兼容的表格是根据结构化的数据生成的.如果你想要的为这份数据做贡献,请检出以下链接的内容 https://github.com/mdn/browser-compat-data 并发送拉取请求
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
pointer-events | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Compatibility unknown
- Compatibility unknown
规范
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 pointer-events |
Candidate Recommendation | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) pointer-events |
Recommendation | Initial definition |