`pointer-events: none;`的效果

整理自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应用举例及扩展