react-native-web的点击“穿透”问题

[hushicai]

最近在做rnweb相关工作，遇到了一个比较“诡异”的问题。

react-native: 0.59.10
react: 16.9.0
react-native-web：0.11.5

页面顶部的返回按钮，触发了两次。

初步调试后，发现并不是当前这个页面的返回按钮触发了两次，而是“穿透”到了上一个页面的返回按钮。

在真机、chrome模拟器上都有问题。

这会不会以往我们常说“300ms”延迟导致的点击穿透呢？

然而搜索了各种issues后，并没有发现相关线索，姿势可能不太对。。。

实在没办法了，只好祭出“源码”大法了。。

在阅读React事件系统源码的过程中，偶然发现，touch和mouseDown`事件都会使触摸元进入Responder系统：

而在web上，触发touch事件之后，紧接着会触发一系列mouse事件。。

按照这个线索，搜了一下rnweb的issues，果然有类似问题：necolas/react-native-web#802。

顺藤摸瓜，找到了necolas填的坑：necolas/react-native-web#938。

rnweb为了防止触发两次press，只是简单地按250ms延迟来过滤mouse事件。

但是实际上，250ms并不可靠，部分浏览器失效了。

在rnweb 0.11.5版本中，necolas把间隔调大到1000ms，依然没用：

总结一下问题：

点击当前页面的返回按钮后，当前页面的返回按钮销毁了，随后触发的mouse事件进入了Responder系统，在上一个页面的返回按钮上触发了onPress事件。

既然事件间隔无法过滤mouse事件，只好想其他办法了。

理论上，mouse事件在移动端上应该没有什么用。

所以，我们可以在capture截断，拦截mouse事件：

问题得以解决。