如何让两个叠在一起的div，事件都能执行？

最近接到一个移动端需求

需要做一个透明div 盖在顶部，并且这个div要监听滑动事件

但是又不能影响底下div的事件

例: 如图，切一个蓝色div盖住顶部一部分，监听滑动事件，但是点底下的全部、图片 这些功能都还是可以执行

我目前做出来是，蓝色div层 会盖掉底下div 导致底下div的事件无法执行 不知道能否解决?

试过在蓝色div层加css的pointer-events属性了 没办法 监听事件会失效

大家有什么好方法吗？

https://codepen.io/AndyTsai/p...
做一个简单demo，其实就点.topDiv时 test()和test2() 都要执行