From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/svg/attribute/pointer-events/index.html | 102 +++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 files/zh-cn/web/svg/attribute/pointer-events/index.html (limited to 'files/zh-cn/web/svg/attribute/pointer-events/index.html') diff --git a/files/zh-cn/web/svg/attribute/pointer-events/index.html b/files/zh-cn/web/svg/attribute/pointer-events/index.html new file mode 100644 index 0000000000..5a490a1b6d --- /dev/null +++ b/files/zh-cn/web/svg/attribute/pointer-events/index.html @@ -0,0 +1,102 @@ +--- +title: pointer-events +slug: Web/SVG/Attribute/pointer-events +translation_of: Web/SVG/Attribute/pointer-events +--- +
{{SVGRef}}
+ +

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

+ +

Note: 作为一个展示属性， {{cssxref('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
+})
+ +

{{EmbedLiveSample('topExample', '100%', 150)}}

+
+ +

作为一个展示属性，他可以被很多元素使用，但和它紧密相关的只有下面的23个元素: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('switch')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tspan')}}, {{SVGElement('use')}}

+ +

用法

+ + + + + + + + + + + + + + + + +
值bounding-box | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none
默认值visiblePainted
是否可动画Yes
+ +

为了详细了解每个可能的值，请参考CSS文档 {{cssxref('pointer-events')}}.

+ +

浏览器兼容

+ + + +

{{Compat("svg.attributes.presentation.pointer-events")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "interact.html#PointerEventsProperty", "pointer-events")}}{{Spec2("SVG2")}} 
{{SpecName("SVG1.1", "interact.html#PointerEventsProperty", "pointer-events")}}{{Spec2("SVG1.1")}}Initial definition
-- cgit v1.2.3-54-g00ecf