假如你有这么一个需求,你需要为一个页面生成水印,水印需要浮在最上层,那如何保证水印不会遮盖底层的内容呢?也就是我们要讲的 “事件穿透”

 

在PC网页中,直接生成的是浏览器的dom元素进行排列绘制

因此可以利用css自带的属性: pointer-events: none;

遮罩层容器添加一条css属性 pointer-events: none, 遮罩下的就可以点击了,IE11+支持

 

而React-Native则比较特殊,他毕竟不是运行在浏览器上的,他只是实现了Android和Ios底层View组件的UI框架

但是他也为我们提供了一份解决方案:View组件的pointerEvents属性

来自官网的介绍:用于控制当前视图是否可以作为触控事件的目标(特别注意 不要写Touchablexxx组件进行测试,因为这个组件本身就是要被点击触发的)

auto:视图可以作为触控事件的目标。
none:视图不能作为触控事件的目标。
box-none:视图自身不能作为触控事件的目标,但其子视图可以

<View pointerEvents="none">
  // something View Component
</View>

RN未必能支持原生js阻止事件冒泡、捕获、穿透等等,而且写起来比较麻烦,不推荐

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐