移动端touch与click区别--移动端开发整理笔记(五)
移动端用touch还是click?
在移动端开发中,click事件有300ms的延时,由来源于iphone处理双击缩放功能种下的坑。因为用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。为了区分用户的操作是双击还是单击,就增加了300ms的延时等待!随着touch端界面的发展,用户体验的提高使得300ms让人难以忍受。
touch事件存在的问题:
-
某些场景下存在点击穿透的问题。(在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend --》click。可通过在touch事件中取消默认事件,e.preventDefault()来解决。)
-
touchstart事件时触摸屏幕就会触发,touchend事件是手指离开屏幕就会触发,而有时候,我们仅仅是只想滑动屏幕,却会触发这两个事件。
对于300ms问题解决方案:
-
直接使用 fastclick
优点:全局引入,方便省事
缺点:增加插件冗余?
-
使用 zepto touch
优点:基于 zepto 核心,还提供 singleTap, doubleTap, longTap, swipe 等简单触控类型判断。
缺点:坑多,例如使用 setTimeout 延迟触发事件,需要解决点透问题。
-
直接原生绑定 touchstart / touchend
优点:除了减少插件依赖,好像没想到什么优点。
缺点:需要处理 touchmove scroll 的一些误杀。也不一定就解决快,原生往往预示着需要自己处理一大堆东西。
-
造轮子,封装到自己(团队)的核心框架里
-
禁用缩放。
当在html文档中包含如下标签:
<meta name="viewport" content="user-scalable=no"/> <meta name="viewport" content="init-scale=1.0,maximum-scale=1.0" />
表明这个页面是不可以缩放的,那么双击缩放的功能就没有意义了。
-
改变默认的视口宽度
<meta name="viewport" content="width=device-width" />
现在的移动端开发已经不太需要关注 300ms 的问题了,因为主流的移动浏览器都已经对设置以上meta的页面去除了 300ms 的延迟。对旧的系统及浏览器使用fastclick。