pointer-events

试一试

pointer-events: auto;

pointer-events: none;

pointer-events: stroke; /* SVG-only */

pointer-events: fill; /* SVG-only */

<section class="flex-column" id="default-example">
  <div id="example-element">
    <p>
      <a href="#">example link</a>
    </p>
    <p>
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <a xlink:href="#">
          <circle
            cx="50"
            cy="50"
            fill="#3E6E84"
            r="40"
            stroke="#ffb500"
            stroke-width="5"></circle>
          <text fill="white" text-anchor="middle" x="50" y="55">SVG</text>
        </a>
      </svg>
    </p>
  </div>
</section>

#example-element {
  font-weight: bold;
}

#example-element a {
  color: #009e5f;
}

#example-element svg {
  width: 10em;
  height: 10em;
}

语法

/* Keyword values */
pointer-events: auto;
pointer-events: none;

/* Values used in SVGs */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: bounding-box;
pointer-events: all;

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

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

值

auto

元素的行为与未指定 pointer-events 属性时相同。在 SVG 内容中，此值和 visiblePainted 值具有相同的效果。

none

元素本身永远不会是指针事件的目标。但是，通过将 pointer-events 设置为其他值，其子树可以保持可被定位。在这种情况下，指针事件将在事件捕获和冒泡阶段，在事件传递到或离开后代元素时，适当地触发此父元素上的事件监听器。

注意：当指向设备移动到元素或其后代中时，会触发 pointerenter 和 pointerleave 事件。因此，即使在父元素上设置了 pointer-events: none 而未在子元素上设置，在指针移入或移出后代元素后，事件仍会在父元素上触发。

仅限 SVG（对 HTML 实验性）

visiblePainted

仅限 SVG（对 HTML 实验性）。只有当 visibility 属性设置为 visible 并且例如，当鼠标光标位于元素的内部（即“填充”）并且 fill 属性设置为非 none 值时，或者当鼠标光标位于元素的周长（即“描边”）并且 stroke 属性设置为非 none 值时，该元素才能成为指针事件的目标。

visibleFill

仅限 SVG。只有当 visibility 属性设置为 visible 并且例如，当鼠标光标位于元素的内部（即填充）时，该元素才能成为指针事件的目标。fill 属性的值不影响事件处理。

visibleStroke

仅限 SVG。只有当 visibility 属性设置为 visible 并且例如，当鼠标光标位于元素的周长（即描边）时，该元素才能成为指针事件的目标。stroke 属性的值不影响事件处理。

visible

仅限 SVG（对 HTML 实验性）。当 visibility 属性设置为 visible 并且例如，鼠标光标位于元素的内部（即填充）或周长（即描边）时，该元素可以成为指针事件的目标。fill 和 stroke 的值不影响事件处理。

painted

仅限 SVG（对 HTML 实验性）。只有当例如，鼠标光标位于元素的内部（即“填充”）并且 fill 属性设置为非 none 值时，或者当鼠标光标位于元素的周长（即“描边”）并且 stroke 属性设置为非 none 值时，该元素才能成为指针事件的目标。visibility 属性的值不影响事件处理。

fill

仅限 SVG。只有当指针位于元素的内部（即填充）时，该元素才能成为指针事件的目标。fill 和 visibility 属性的值不影响事件处理。

stroke

仅限 SVG。只有当指针位于元素的周长（即描边）时，该元素才能成为指针事件的目标。stroke 和 visibility 属性的值不影响事件处理。

bounding-box

仅限 SVG。只有当指针位于元素的边界框上时，该元素才能成为指针事件的目标。

all

仅限 SVG（对 HTML 实验性）。只有当指针位于元素的内部（即填充）或周长（即描边）时，该元素才能成为指针事件的目标。fill、stroke 和 visibility 属性的值不影响事件处理。

描述

当未指定此属性时，visiblePainted 值的相同特性适用于 SVG 内容。

除了指示元素不是指针事件的目标之外，值 none 指示指针事件“穿过”该元素并改为定位该元素“下方”的任何内容。

请注意，通过使用 pointer-events 阻止元素成为指针事件的目标，这不一定意味着该元素上的指针事件监听器不能或不会被触发。如果该元素的某个子元素明确设置了 pointer-events 以允许该子元素成为指针事件的目标，那么任何以该子元素为目标的事件都将在事件沿父链传播时穿过父元素，并适当地触发父元素上的事件监听器。当然，任何屏幕上被父元素覆盖但未被子元素覆盖的点的指针活动都不会被子元素或父元素捕获（它将“穿过”父元素并定位其下方的内容）。

具有 pointer-events: none 的元素仍将通过使用 Tab 键进行顺序键盘导航来接收焦点。

正式定义

正式语法

pointer-events = 
  auto            |
  bounding-box    |
  visiblePainted  |
  visibleFill     |
  visibleStroke   |
  visible         |
  painted         |
  fill            |
  stroke          |
  all             |
  none            

示例

禁用所有图像上的指针事件

此示例禁用所有图像上的指针事件（点击、拖动、悬停等）。

img {
  pointer-events: none;
}

禁用单个链接上的指针事件

此示例禁用指向 http://example.com 的链接上的指针事件。

HTML

<ul>
  <li><a href="https://mdn.org.cn">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

CSS

a[href="http://example.com"]
{
  pointer-events: none;
}

结果

规范

浏览器兼容性

另见

• user-select
• SVG pointer-events 属性
• SVG visibility 属性
• PointerEvent