我们把创建空白遮罩的处理称其为幽灵遮罩。
幽灵遮罩 可以拓展用户可点击区域，又或者你想让用户看到元素，但又不想要用户可以操作。
这里拿起点小说的阅读页举例，我整个页面想要点击除开书封和黄色区域以外的区域都触发工具栏。
如果用 JS 去判断，就要监听整个页面的点击事件，然后判断这个点击事件是否冒泡到书封或者是黄色区域。如果是则阻止这个点击事件，如果不是则呼出工具栏。并且如果这个页面后续的按钮增加，这边的 JS 逻辑就会随着增加，会有一种费力不讨好的感觉。
而此时如果采用 幽灵遮罩 的方案。很简单，你只需要创建一个幽灵遮罩, 将呼出工具栏的事件绑定到 幽灵遮罩 上。对于有其它点击逻辑的元素，只需要将其 z-index设定到超过 幽灵遮罩 的地方搞定。全局就一个JS 绑定事件，哪有啥冒泡不冒泡的逻辑。后续拓展也是只需要设置 z-index 简单又方便。
再比如，你有一个复杂的表单，你在点击了 submit 按钮，然后数据正在发送的过程中。你不想让用户操作其它的控件，或者多次点击 submit。你只需要在用户点击 submit 的时候，让这个 幽灵遮罩 出现，loading 完成之后让 幽灵遮罩 消失。
这样用户所有在 loading 状态下的点击都会被 幽灵遮罩 拦截，你甚至可以直接在用户点击 幽灵遮罩 的之后，弹出一个 toast 告诉用户当前正在 loading 当中。而这整个逻辑如果不用 幽灵遮罩 实现其实是满复杂的。
并且这整个过程用户是无感知的。因为，之所以叫 幽灵遮罩 就是用户看不到的遮罩。
更多用途
讲到 幽灵遮罩 又不得不提一个与之类似的属性 pointer-events: none;。
- 幽灵遮罩 是让用户看不到，但是又能碰到;
-
pointer-events: none;是让用户看到，但是碰不到;
这个属性也同样适用于，你不想让 submit 按钮被用户多次点击多次提交。只需要在用户点击了按钮之后，里面给按钮设定一个 pointer-events: none; 属性，在比如说 loading 完或者 500ms 之后再去掉这个属性，这样就很方便的做到防抖。
参考链接：https://juejin.im/post/5da9abdef265da5b8a516f1c