CSS pointer-events 属性-之路教程

CSS pointer-events 属性值说明

值	描述
none	元素永远不会对指针事件作出反应。
auto	该元素接受指针事件，例如Clicks，Hover等。这是此属性的默认值。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;

指针事件属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.example {
        pointer-events: none;
      }
      div.example2 {
        pointer-events: auto;
      }
    </style>
  </head>
  <body>
    <h2>The pointer-events Property</h2>
    <h3>Pointer-events: none</h3>
    <div class="example">
      Click here: <a href="https://www.onitroad.com/learn-javascript.html">JavaScript Tutorial</a>
    </div>
    <h3>Pointer-events: auto</h3>
    <div class="example2">
      Click here: <a href="https://www.onitroad.com/learn-css.html">CSS Tutorial</a>
    </div>
  </body>
</html>

在给定的示例中，将鼠标悬停在元素上以查看哪个元素对指针事件做出反应。

这个例子展示了如何指定指针事件通过底层元素或者被底层元素捕获：

带有 <svg> 标签的指针事件示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .a {
        fill: #ccc;
      }
      .b {
        fill: #8ebf42;
      }
      .c {
        fill: #1c87c9;
        pointer-events: none;
      }
      .d {
        stroke: #666;
        fill: none;
        pointer-events: all;
      }
      .box:hover {
        stroke: #000;
        stroke-width: 5;
      }
    </style>
  </head>
  <body>
    <h2>Pointer-events 属性示例</h2>
    <svg width="300" height="300">
      <g transform="translate(20, 20)">
        <path class="a box" d="M 0 0 L 100 0 L 100 100 L 0 100 z" />
        <path class="b box" d="M 50 50 l 100 0 l 0 100 l -100 0 z" />
        <path class="c box" d="M 100 100 l 100 0 l 0 100 l -100 0 z" />
        <path class="d box" d="M 150 150 l 100 0 l 0 100 l -100 0 z" />
      </g>
    </svg>
  </body>
</html>

CSS pointer-events 属性

pointer-events 属性定义元素是否对指针事件做出反应。

此属性是 SVG 属性，未在 CSS 规范中定义。

许多值适用于 SVG 元素，但其中只有三个值适用于 HTML 元素。

重要说明

使用指针事件来防止元素成为指针事件的目标并不意味着指针事件侦听器不会被触发。
如果元素的子元素之一具有指针事件，则意味着子元素可以成为指针事件的目标。
因此，针对该子级的任何事件都会通过父级并在其上触发事件侦听器。

初始值	auto
应用于	所有元素。
继承	可继承
可动画的	无效
版本	可扩展的矢量图形（SVG）1.1（第二版）。
DOM 语法	object.Style.PointeRevents =“auto”;

只适用于SVG的值：

visiblePainted	当可见性属性被设置为可见的鼠标游标在元素的内部设置鼠标游标时，该元素只能是指针事件的目标，当鼠标游标超过周边时，填充属性设置为除非无的值元素stroke属性被设置为amal以外的值。
visibleFill	当可见性属性设置为可见的鼠标游标在元素的内部，该元素只能是指针事件的目标。
visibleStroke	当鼠标游标在元素的周边上时，该元素只能是当可见性属性设置为可见时指针事件的目标。
visible	当可见性属性被设置为可见时，该元素只能是指针事件的目标，鼠标游标位于元素的内部或者周边。
painted	例如，该元素只能是指针事件的目标。鼠标游标在元素的内部，填充属性设置为除非鼠标游标以外的值，鼠标游标在元素的周边上设置为unly以外的值。
fill	当指针在元素内部时，该元素只能是指针事件的目标。
stroke	当指针越过元素的周边时，该元素只能是指针事件的目标。
all	当指针越过元素的内部或者周边时，该元素只能是指针事件的目标。

日期：2020-06-02 22:14:44 来源：oir作者：oir

←CSS ::placeholder 伪元素

CSS 位置属性position→

CSS pointer-events 属性值说明

语法

指针事件属性示例：

带有 <svg> 标签的指针事件示例：

重要说明

只适用于SVG的值：

目录