CSS 再谈 pointer-event

之前在 JavaScript 优化拖移效果 中，我曾经简单讲过：

之后，如果需要在移动时取消所有鼠标的响应时间，可以通过调整 pointer-events 样式来修改，在变更拖动状态时修改 body 的 style 即可。

但没有进行过详细的介绍，这次正好结合了其他点仔细讲讲。

pointer-event 其实也有许多值，可以在 MDN 中 pointer-events 详细的描述了这些值，当然，大部分都是 SVG only，我们今天考虑的自然不是 SVG Only 的属性，而是通用的属性。

说白了也就两个：auto 和 none。auto 自不必说，其实和 initial 差不多一个意思。而 none 不仅可以实现事件禁用，还可以实现点击穿透。

点击穿透

正式介绍一下，什么叫点击穿透？

假设你想实现这样一个效果，其中图片是一层（绘制在 canvas 上），拖拽和控制点的矩形框是另一层，那么「矩形框层」必须在 Canvas 层的上方，但是在图片层自带了拖动事件，只要矩形框跟着动就行了，怎么办——所以就需要用到穿透了——pointer-event: none。搞定。

也就是说，使用了点击穿透这个效果，可以把原来覆盖的图层无视，直接把鼠标事件作用于被覆盖的图层。

当然，大家一定要说，那为什么不直接让图片层跟着矩形框动呢——你说的很有道理，但为了面子我必须说：我们这是特定的某个应用场景。

事件禁用

如果你的事件禁用还在强行写一长串 JS，那你就大错特错了。pointer-event: none 可以用一句 CSS 做到这个效果，何乐而不为呢。

当然，对于事件禁用，让人注意的其实是一个题外话，试试下面的 demo（两个矩形框里也隐藏了按钮）：

我们会发现，只有 opacity: 0 才有效，也就是说，被我们一直忽略的 visibility 也有这种效果，所以我们可以放心大胆的直接用 visibility 来隐藏一些元素，不用特地写上 pointer-event: none 了。