移动前端—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的解决方法大家有兴趣可以百度一下。