“这是我参与更文挑战的第28天，活动详情查看：更文挑战”

pointer-events

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

请注意，这是一个 SVG 属性，未在任何 CSS 规范中定义。

pointer-events 属性可以有许多适用于 SVG 元素的值，但这些值中只有三个适用于 HTML 元素。当指针事件用于 HTML 元素时，它可以指定元素是否可以响应鼠标（或触摸）事件。它可用于防止单击、状态（CSS 活动、焦点和悬停状态）和光标操作（例如，在链接上显示指针光标）。

您可以让元素响应指针事件（auto），或者阻止它这样做（none）。如果阻止它响应指针事件，它下面的元素将成为这些事件的目标。如果您单击该元素，则其下方的元素将收到该单击事件。这同样适用于悬停和其他光标操作。例如，您可以选择位于具有指针事件(pointer-events: none)的元素下方的元素中的文本（请参阅下面的演示）。

指针事件属性在不同的场景中非常有用。此属性的一个优点是允许您使用 pointer-events: none 创建 60fps 滚动。 Ryan Seddon 写了一篇关于它如何工作的详细文章；他的文章值得一读。

官方语法

声明：

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

官方语法中的值适用于 SVG 元素。在这些值中，只有这些值适用于 HTML：

pointer-events: auto | none | inherit

初始值：auto
适用于：所有元素
动画：否

值（Values）

auto

默认值。启用指针事件。该元素响应指针事件，阻止这些事件在其下方的元素上触发。

none

元素上的指针事件被禁用。元素不响应指针事件。它下面的元素可以响应指针事件，就好像元素不存在于它们上面一样。

inherit

该元素从其父元素继承其指针事件值。

其他

有关其他值的更多信息，请参阅 SVG 规范。

例子

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* ... */
    pointer-events: none;
}

在线 Demo

在以下示例中，覆盖层具有指针事件：无（pointer-events: none;），因此您可以选择文本并单击其下方的锚标记。还要注意当您将鼠标悬停在链接上时光标如何变成指针（指向手），因为悬停状态是在链接上触发的。

因为掘金不支持引进 iframe 预览，预览效果见 codepen css poiter-events demo

尝试将 none 值更改为 auto 以查看新的响应效果是怎么样的。

提示

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

css 属性之 pointer-events