处理遮罩下面的元素无法触发点击事件

先说问题描述:

比如我现在的需求是做了一个轮播图.但是我在轮播图上面覆盖了一个iphone x的相框,

也就是可以理解为在轮播图的最上层覆盖了一个遮罩.

然后我再去拖拽轮播图时,发现无法拖拽了.

也就是我标题所描述的遮罩下面的元素无法触发点击事件.

解决方案1:
你可以点击遮罩的时候,触发下边元素的点击事件:

(".a").on("cllick",function(){(".b").click();
)

解决方案2:
把元素遮罩设置为子元素呢,把你想点击的作为父元素,
这样使用DOM的冒泡时间,当点击遮罩的时候,就能捕获到事件了.
但是有个问题,因为当前页面你可能有一个遮罩但是有多个点击事件,恩,酌情处理下吧

解决方案3:
添加pointer-events: none，你的遮罩盖住了下边的元素，所以你点击的事件其实是作用在了遮罩上面。而pointer-events: none可以穿透遮罩，点击到下面的元素。我刚做的项目用过这个属性，亲测有效。支持ie11及其他浏览器

解决方案4:
增加你要点击页面的z-index值

解决方案目前我总结的是有这四类. 平时开发中 基本够用了. 当然 ,你要根据你的需求选择对应的解决方案. 在这里 我是用 方案三 完美解决 相框内元素无法拖拽的问题的