整理自 gitHub 笔记：CSS3：pointer-events: none;的效果

一、背景

项目中要实现长按图片触发分享弹窗的功能，测试的时候发现长按图片会触发系统的弹窗（保存图片，分享图片等）。如何禁止系统的行为呢？
bing 了一下发现 pointer-events: none; 可以解决问题。

二、细说pointer-events: none;

2.1 语法

pointer-events: none;表示元素不会对 mouse/touch 相关事件作出响应。

2.2 pointer-events: none;的效果

1. 不会触发鼠标相关的事件，以及相关的 hover 效果

• click
• touchStart
• touchMove
• touchEnd
• mouseMove
• mouseOver
• mouseLeave
• drag 相关事件

2. 不影响事件冒泡、捕获，只是影响事件处理阶段

inner元素被 pointer-events: none;。点击inner 元素虽然其不触发点击事件，但是其父元素 outer 会触发点击事件。

3. 穿透效果

1. 
   Front元素被 pointer-events: none;。点击Front 元素虽然其不触发点击事件，但是其 Z 轴 底部的元素 Backend 会触发点击事件。也不影响 Z 轴 底部的文本选择。
2. 穿透效果应用场景：日期选择组件的渐变效果
   
   上下两端的渐变效果一般使用伪元素覆盖上面，为了不影响滑动选择日期，可以给伪元素添加pointer-events: none;。

4. 移动端禁止长按图片的系统弹窗

5. 应用在 a 标签上可以禁止 hover 效果，跳转。

参考

1. CSS-TRICKS pointer-events
2. CSS3 pointer-events:none 应用举例及扩展