pointer-events

/* 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 属性的值不会影响事件处理。

边界框

仅适用于 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;
}

结果

• SVG 属性 pointer-events
• SVG 属性 visibility
• PointerEvent API
• WebKit Specs PointerEventsProperty 扩展以用于 (X)HTML 内容
• user-select - 控制用户是否可以选择文本