认识 CSS pointer-events 属性

本文介绍: 条目状态初始值 auto可用值适用所有元素：auto/none，只适用于 SVG：bound in g–box/visiblePa int e d/visibleFill/visibleSt r ok e/visible/p a int e d/fill/strok e/all可继承是的动画类型离散动画（关键帧之间不会有插帧，不会有过渡动画）我们来结合例子说明。是一个可继承属性，按照 CSS 的层叠与继承规则，子元素未设置时将会继承父值。如下例，self 元素设置，child 元素继承到也为none。

`pointer-events` 的基本 信息

pointer-events 属性用来控制一个元素能否响应鼠标操作，常用的关键字有 auto 和 none

pointer-events: none; // 让一个元素忽略鼠标操作
pointer-events: auto; // 还原浏览器设定的默认行为

条目	状态
初始值	auto
可用值	适用所有元素：auto/none，只适用于 SVG：bound in g–box/visiblePaint e d/visibleFill/visibleSt roke/vi s i ble/paint e d/fill/stroke/all
可继承	是的
动画类型	离散动画（关键帧之间不会有插帧，不会有过渡动画）

`pointer-events: none` 的效果：忽略 鼠标 操作

对一个元素设置 pointer-events: none，能让浏览器在处理鼠标操作时，忽视掉这个元素的存在，直接「穿透」到点击区域背后的元素上。

意味着直接在这个元素上做鼠标操作时

我们来结合例子说明。

pointer-events 是一个可继承属性，按照 CSS 的层叠与继承规则，子元素未设置 pointer-events 时将会继承父值。

如下例，self 元素设置 pointer-events: none ，child 元素继承到 pointer-events 也为 none。

如果这时将 ch ild 设置为 pointer-events: auto 来还原对鼠标操作的响应，点击 ch ild，触发 c hild 上的 click 事件，接着事件冒泡触发三级打印。

可见 pointer-events 只是说明某个元素是否响应直接作用在它身上的鼠标操作，不会干扰事件冒泡捕获流程。

另外，可继承性也意味着如果在 body 上设置 pointer-events: none，将会作用于 body 下的所有元素。

pointer-events: none 带来两个特点：

例如 Tailwind CSS 给的这个例子，希望点击搜索图标时能聚焦到输入框。只要对图标元素设置 pointer-events: none 做穿透即可。

<div class="relative"&gt;<div class="absolute pointer-events-none"&gt;<svg class="absolute text-slate-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"&gt;<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /></svg></div><input type="text" placeholder="Search" class="...">
</div>

例如点击提交按钮后，为按钮设置 pointer-events: none 防止连续提交。

更进一步甚至可以结合 :active 和 animation 实现 throttle 效果，还在用 JS 做节流吗？CSS 也可以防止按钮重复点击 – 掘金 (juejin.cn)，很有趣的玩法，可以扩展阅读看看哟。

例如给 a 标签设置 pointer-events: none 阻止默认行为。但是需要小心，不响应鼠标操作并不等同于阻止事件响应，事件冒泡捕获机制与 pointer-events 无关，在子元素上设置 pointer-events: auto 还是可以触发父元素上绑定的事件，并且继续向上冒泡。