移动前端—touch事件与click事件的区别

一·: 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的解决方法大家有兴趣可以百度一下。

        


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章