点透

点透

现象

click事件在移动端有300ms延迟,这是为了区分双击放大所以（300ms延迟原因 | 译文）

移动端用zepto框架(≈jquery，但是更轻量级)

zepto编译进touch模块(zepto在线定制化模块)，可以用tap代替click解决延迟问题

但是随之而来的问题是点透

点透现象(手机 || 电脑手机视图&&touch screen 打开)点击重合区域即可再现点透现象。

分析

zepto touch.js源码

touch模块绑定事件touchstart,touchmove和touchend到document.body上，然后通过计算touch事件触发的时间差，位置差来实现了自定义的tap,swipe

tap事件冒泡到body上才触发，注意用户手接触屏幕和离开屏幕会先触发click事件，所以tap事件完成之后，延迟的click事件触发

表现在#c消失之后，click事件就触发了下层有click事件的#p上

PS：只有在被触发时，当前有click事件的元素显示，且在面朝用户的最前端时，才触发click事件

解决方案

1.

fastclick

有关fastclick的老文 | 译文

原理是在目标元素上绑定touchstart ,touchend事件，然后在touchend结束的时候立马执行click事件，这样就解决了“点透”的问题（实质是事件冒泡导致）

方便之处在于：使用简单，依然用click，不用tap、也就zepto+touch、不仅解决了移动端click延迟的问题、input聚焦问题神马的也都解决了

2.

touchend+e.preventDefault()

• touchend： 优先于下面的#p捕获的事件(移动端点击事件触发顺序 各个手机终端不尽相同，但是touchend都砸click之前)
• preventDefault()： 移动端click的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被event.preventDefault()阻止的行为

缺点是：虽然可以解决点透问题，但是会在滑动的时候误触

3.

有人想在zepto touch.js tap事件中监听preventDefault，阻止click事件也不失为一个好办法传送门挖坑改天看

总结：

• tap、touchend、touchstart之后，目标元素消失或出现或移动，其他绑定了click事件的元素出现在目标区域，就会出现点透
• a链接默认click事件、input、select元素等也都是click聚焦、弹键盘
• touchend、touchstart 随机不触发、不够灵敏
• 在安卓4.1+的chrome浏览器上，如果在meta viewport中指定页面不可缩放，则click没有上述300ms左右的延迟
• 用tap等于放弃了PC
• 最好还是用fastclick-demo，感受下

参考

• http://blog.youyo.name/archives/zepto-tap-click-through-research.html
• http://www.cnblogs.com/lilyimage/p/3740668.html
• http://realwall.cn/blog/?p=162

转载于:https://www.cnblogs.com/freeyiyi1993/p/4445104.html