点透

点透

现象

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,感受下
参考
原文地址:https://www.cnblogs.com/freeyiyi1993/p/4445104.html