一·: 300毫秒的道德规范
移动设备访问的Web页面都是pc上的页面。在默认的viewpoint(980px)的页面往往都是需要“双击”或“捏开”放大来看清页面。正是为了确认确认用户是“单击”还是“双击”。Safari用300ms延迟来判断,而后来的iPhone,Android也用这种方式来判断,因此移动页面的click反应比PC端的慢上300毫秒。
为了解决这个延迟问题,在移动端一般用tap事件来代替click事件。其中tap事件中常用的触发器有3个,分别为touchstart、touchmove和touchend。但是我们直接用touch事件来监听时,在网页上无法识别出touch事件,因此我们需要判断一下,如果是移动端设备就使用touch事件,如果是PC端就使用mousedown、mouseup这些事件。代码如下:
var touchStart,touchMove,touchEnd; touchStart = isMobile() ? 'touchstart' : 'mousedown'; touchMove = isMobile() ? 'touchmove' : 'mousemove'; touchEnd = isMobile() ? 'touchend' : 'mouseup';其中isMobile()函数百度上有很多,在这里就不提供了,有兴趣的可以百度下。
二: tap“点透”的解决方法
由于没有图片,小编很难解析出tap点透是什么意思,大家有兴趣的可以去百度一下,我在这里主要说一下解决的方法:
1. 使用缓动动画,过渡300ms的延迟
2. 中间加一层dom元素,让它接受click事件,过300ms后隐藏。
3. 上下两层都使用tap事件,原理上解决了这个bug,但避免了原生标签的click事件的发生。
4. 使用最新版的zepto框架。
三: Touch事件中的bug
1. Android有些版本只会触发一次touchstart、touchmove,但touchend不触发。
2. 在touchmove中加入: event.preventDault()可以修复这个bug。
3. event.preventDault()会导致默认行为不会发生,如页面滚动不了。
这些bug的解决方法大家有兴趣可以百度一下。