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

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

+ +
/* Keyword values */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* SVG only */
+pointer-events: visibleFill;    /* SVG only */
+pointer-events: visibleStroke;  /* SVG only */
+pointer-events: visible;        /* SVG only */
+pointer-events: painted;        /* SVG only */
+pointer-events: fill;           /* SVG only */
+pointer-events: stroke;         /* SVG only */
+pointer-events: all;            /* SVG only */
+
+/* Global values */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+ +

当此属性未指定时，visiblePainted值的相同特征适用于 SVG（可缩放矢量图形） 内容。

+ +

除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

+ +

{{cssinfo}}

+ +

语法

+ +

pointer-events属性被指定为从下面的值列表中选择的一个关键字。

+ +

值

+ +
+
auto
+
与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同
+
none
+
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
+
visiblePainted
+
+
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：
+ +
+ +
    +
  • visibility属性值为visible，且鼠标指针在元素内部，且fill属性指定了none之外的值
    • +
  • visibility属性值为visible，鼠标指针在元素边界上，且stroke属性指定了none之外的值
    • +
+
+
visibleFill
+
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill属性的值不影响事件处理。
+
visibleStroke
+
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素边界时,元素才会成为鼠标事件的目标，stroke属性的值不影响事件处理。
+
visible
+
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill和stroke属性的值不影响事件处理。
+
painted
+
+
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：
+ +
+ +
    +
  • 鼠标指针在元素内部，且fill属性指定了none之外的值
    • +
  • 鼠标指针在元素边界上，且stroke属性指定了none之外的值
    • +
+ +
visibility属性的值不影响事件处理。
+
+
fill
+
只适用于SVG。只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill和visibility属性的值不影响事件处理。
+
stroke
+
只适用于SVG。只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标，stroke和visibility属性的值不影响事件处理。
+
all
+
只适用于SVG。只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill、stroke和visibility属性的值不影响事件处理。
+
+ +

示例

+ +

示例 1

+ +
/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */
+img {
+  pointer-events: none;
+}
+ +

示例 2

+ +

点击链接 http://example.com 时，不会跳转

+ +
<ul>
+<li><a href="https://developer.mozilla.org/">MDN</a></li>
+<li><a href="http://example.com">example.com</a></li>
+</ul>
+ +
a[href="http://example.com"] {
+  pointer-events: none;
+}
+ +
{{EmbedLiveSample('Example_2', "500", "100")}}
+ +

提示

+ +

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然，位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（鼠标活动将会穿过父元素而指向位于其下面的元素）。

+ +

我们希望为HTML提供更为精细的控制（而不仅仅是auto和none），以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法，请添加至wiki页面的Use Cases部分，以帮助我们如何针对HTML扩展pointer-events。

+ +

该属性也可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的hover效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。对body元素应用pointer-events：none，禁用了包括hover在内的鼠标事件，从而提高滚动性能。

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}}
+ +

Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

+ +

浏览器兼容

+ +

{{Compat("css.properties.pointer-events")}}

+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf