pointer-events

pointer-events属性是一个展示属性,用于定义元素是否或何时可能是鼠标事件的目标元素。

Note: 作为一个展示属性, pointer-events 可以被当做CSS属性使用.

<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.

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
pointer-eventsChrome ? 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