移动端web开发click touch tap区别

 

 

移动端用tap时会有穿透问题

一：click与tap比较
click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。singleTap和doubleTap分别代表单次点击和双次点击
 
二：tap的穿透处理
使用zepto框架的tap的点击事件，来规避click事件的延迟响应，会出现穿透，即点击会触发非当前层的点击事件。
 
三：穿透原因
问题：在html5点击了q以后，弹出b的弹框
 
因为tap事件是通过document绑定了touchstart和touchend事件实现，$('.q')上，当touchend事件冒泡到document上以后执行$(this).hide();此时$('.b'),就处在了页面的最前面
现在touchend冒泡到了document上，并且$('.b')在页面的最前面，然后就触发了click事件


更多web前端免费学习资料加群领取，群号434623999