移动开发实践小结

300ms延迟

在移动浏览器中，当你点击按钮的单击事件时，将会等待大约300ms的时间。这是因为，浏览器是等着看看你是不是在执行双击。

不过300ms延迟给带来了不好的用户体验，特别在切换选项卡的时候，会让人觉得是不是没有按到。

我们可以使用fastclick.js解决这个问题，可以在这里fastclick下载到文件。

在页面引入fastclick.js后，接着实例化fastclick最好在body元素的前面，这是使用推荐的方法：

if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function() {
    FastClick.attach(document.body);
  }, false);
}

虚拟键盘导致 fixed 元素错位

当我们在手机的页面上输入文字，fixed的元素会在虚拟键盘出现的时候，表现却变得怪异起来，会错位。因为虚拟键盘的出现改变了viewport的高度，fixed元素也跟着改变位置。

我们可以在虚拟键盘弹出时将fixed元素设置为static，虚拟键盘消失时候设置回来。

因为不能直接获得虚拟键盘出现的事件，不过可以在页面上的输入框获取焦点(focus)的时候，将fixed元素设置为static。在页面上的输入框失去焦点(blur)的时候，将设置回来就可以了。

移动端触摸事件

• 手指刚触摸到屏幕触发：touchstart
• 手指在屏幕上滑动触发：touchmove
• 手指离开屏幕时触发：touchend

touchstart

在touchstart事件触发时，记录手指按下的时间startTime，初始位置initialPos。

touchmove

在touchmove事件触发时，记录当前位置nowPosition（实时移动元素），滑动距离movePosition（当前位置nowPosition与初始位置initialPos的差值，可以再细分成水平距离和垂直距离），判断差值的正负可以知道是左还是右移动。

touchend

在touchend事件触发时，记录手指离开屏幕的时间endTime，获得手指在屏幕上停留的时间stayTime = endTime－startTime，滑动距离movePosition

利用这3个事件，可以用于判断轮播图是否翻页：

• 如果停留时间stayTime小于300ms，可以认为是快速滑动，无论滑动距离是多少，都翻页
• 滑动距离与轮播图显示的容器宽度进行比较，若超过容器宽度的1/3，则翻页，否则不翻页

• ← Previous Post