移动端交互优化

1、移动web页面上click事件响应有300ms延迟

原因：移动设备访问的web页面都是PC上的页面。在默认viewport（980px）的页面往往需要“双击”或“捏开”放大页面。而正是为了确认用户是“双击”还是“单击”。

safari 需要300ms 的延迟来判断。而后来的iphone,android也沿用这样的设计。

举例：如果你点击一下，在300ms内再点击第二次就认为是双击事件。

1.1） 如何解决？

    利用tap事件代替click 

自定义tap事件原理：

    在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手机位置为同一位置（或允许移动一个非常熊德位移值）且时间间隔较短（一般认为是200ms）

过程中未曾触发过touchmove。即可认为触发了手持设备上的“click”,一般称它为“tap”.(一般使用zepto.js框架)

1.2）问题： Tap “点透”的bug;描述： 点击按钮最上面的蒙层，但是蒙层下的按钮也会触发。

点透发生过程：  touchstart , touchend蒙层消失， 此时由于300ms导致下面的click触发

关于tap 穿透的解决方案：

    ①使用缓动动画，过渡300ms的延迟。

    ② 中间层dom元素的加入，让中间接受这个“穿透”事件

    ③ “上下”都使用tap事件，原理上解决tap 透传事件（但不可避免原生标签的click事件）

    ④ 改用fastclick的库（听过最新的zepto已经fixed掉这个bug）

 

2、tap事件为自定义事件，基于touch基础事件。

2.1）触摸才是移动设备的交互核心事件。

        touchstart: 手指触摸屏幕触发（已经有手指放屏幕上不会触发）

        touchmove： 手指在屏幕上滑动，连续触发

        touchend: 手指离开屏幕时触发

        touchcancel:系统取消touch时候触发（不常用）

2.2）除了常见的事件属性外，触摸事件包含专有的触摸属性。

       touches: 跟踪触摸操作的touch对象数组。

        targetTouches: 特定事件目标的touch对象数组；

        changeTouches: 上次触摸改变的touch 对象数组

2.3）每个touch对象包含属性--根据touch对象跟踪触摸具体位置，从而判断触摸交互或手势事件

       clientX: 触摸目标在视口中的X坐标，clientY

       pageX: 触摸目标在页面中的X坐标（包含滚动），pageY

       screenX：触摸目标在屏幕中的X坐标，screenY

       target: 触摸的DOM节点目标

       identifier: 标识触摸的唯一ID

2.4) Android 4.0,4.1，4.4只会触发一次touchstart,一次touchmove,touchend不触发

解决方案： 在touchmove中加入：event.preventDefault()---------touchmove多次触发，touchend 结束触发

导致问题： 默认行为不发生，如：scroll,导致页面不滚动

 

2.5）常用touch相关的交互效果

    ① 弹性滚动

     当客户端的页面滚动到顶部或底部时候，滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果，带给用户良好的体验。

 但滚动有几种情况：

    1、body层滚动：自带弹性滚动，overflow: hidden 失效，gif和定时器暂停

    2、局部滚动：没有弹性滚动，没有滚动惯性，不流畅

     如何开启？  body { overflow： scroll；-webkit-overflow-scrolling: touch; }

注意： Android不支持原生的弹性滚动，但是可以借助第三方库iScroll来实现

    ② 下拉刷新

    ③ 上拉加载：使用scroll事件，而不是touch事件