移动端touch与click区别--移动端开发整理笔记（五）

移动端用touch还是click？

在移动端开发中，click事件有300ms的延时，由来源于iphone处理双击缩放功能种下的坑。因为用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。为了区分用户的操作是双击还是单击，就增加了300ms的延时等待！随着touch端界面的发展，用户体验的提高使得300ms让人难以忍受。

touch事件存在的问题：

• 某些场景下存在点击穿透的问题。（在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click。可通过在touch事件中取消默认事件，e.preventDefault()来解决。）

• touchstart事件时触摸屏幕就会触发，touchend事件是手指离开屏幕就会触发，而有时候，我们仅仅是只想滑动屏幕，却会触发这两个事件。

对于300ms问题解决方案：

1. 直接使用 fastclick

   优点：全局引入，方便省事

   缺点：增加插件冗余?

2. 使用 zepto touch

   优点：基于 zepto 核心，还提供 singleTap, doubleTap, longTap, swipe 等简单触控类型判断。

   缺点：坑多，例如使用 setTimeout 延迟触发事件，需要解决点透问题。

3. 直接原生绑定 touchstart / touchend

   优点：除了减少插件依赖，好像没想到什么优点。

   缺点：需要处理 touchmove scroll 的一些误杀。也不一定就解决快，原生往往预示着需要自己处理一大堆东西。

4. 造轮子，封装到自己（团队）的核心框架里

5. 禁用缩放。

   当在html文档中包含如下标签：

    <meta name="viewport" content="user-scalable=no"/>
   
    <meta name="viewport" content="init-scale=1.0,maximum-scale=1.0" />
   

   表明这个页面是不可以缩放的，那么双击缩放的功能就没有意义了。

6. 改变默认的视口宽度

    <meta name="viewport" content="width=device-width" />
   

   现在的移动端开发已经不太需要关注 300ms 的问题了，因为主流的移动浏览器都已经对设置以上meta的页面去除了 300ms 的延迟。对旧的系统及浏览器使用fastclick。