移动端vue页面点透分析与解决

近期项目遇到了vue页面事件被带到下一个页面的问题，也就是我们常说的点透事件，主要表现在android机器上，花了不少时间折腾，简单做下总结~

 

• vue页面之间的切换通过Vue Router的router.push方法
• b.vue之前已经访问过，数据通过vuex管理，从a.vue进入到b.vue不再请求数据，直接拿到b.vue数据展示页面；
• a.vue页面上点击最底部的账单后，不到100ms就打开b.vue页面，此时最底部的账单的触摸事件并没有消失，a.vue的触摸事件直接平移到b.vue最底部位置，刚好最底部有个按钮，导致直接打开c.vue。

验证是否因为300ms延迟导致的问题

早在2013做移动端页面时候就听说过点透事件，由click事件引起的300ms的延迟导致：

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟，引起页面点透或是点击失效。

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接<a href="#"></a>，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？

在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的