JavaScript for Mobile

目录

  1. Touch Events
  2. FastClick
  3. iScroll

触摸事件

touch events

  1. touchstart:  手指放到屏幕上的时候触发
  2. touchmove:  手指在屏幕上移动的时候触发
  3. touchend:  手指从屏幕上拿起的时候触发
  4. touchcancel:  系统取消touch事件的时候触发。

jsbin

更多：从 event 中获取更多信息（touches）

然而 JS 没有滑动事件

Fastclick

快点击？

手机上Click延迟300ms

300 毫秒点击延迟的来龙去脉

早期 iPhone 双击缩放

浏览 PC 页面时，默认缩小展示；（使用 980 像素的视窗宽度）

用手指在屏幕上快速点击两次，iOS Safari 才会将网页缩放至适合比例。

这和 300 毫秒延迟有什么联系呢？

用户在 iOS Safari 里边点击了一个链接。

当用户一次点击屏幕之后

浏览器：要打开这个链接？还是想要进行双击操作？等 300 ms 再判断。

用户没有再次点击：打开链接；

用户第二次点击：双击缩放。

解决方案一

禁止缩放

缺点：无法缩放

<meta name="viewport" content="user-scalable=no">   不让用户缩放
<meta name="viewport" content="initial-scale=1,maximum-scale=1">   给出合适的缩放比例

解决方案二

width=device-width meta 标签

宽 320px

Before

After

解决方案二

width=device-width meta 标签

Chrome 32 对包含 width=device-width 或者更小的值的页面上禁用双击缩放。

没有双击缩放就没有 300 毫秒点击延迟。

然而 iOS 不支持

解决方案三

CSS touch-action 属性

a[href], button {
    -ms-touch-action: none; /* IE10 */
    touch-action: none;     /* IE11 */
}

touch-action 的默认值为 auto，将其置为 none 即可移除目标元素的 300 毫秒延迟。

上面的代码在 IE10 和 IE11 上移除了所有链接和按钮元素的点击延迟。

解决方案四

Fastclick

FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。

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

思考

为什么 JS 双击事件没有遇到 300ms 的问题？

http://js.jirengu.com/xufesikano/1/edit

iScroll 库介绍

中文 API 文档

iScroll 提供滚动、缩放、平移、无限滚动、视差滚动、旋转功能等功能

    <head>
    ...
    <script type="text/javascript" src="iscroll.js"></script>
    <script type="text/javascript">
    var myScroll;
    function loaded() {
        myScroll = new IScroll('#wrapper');
    }
    </script>
    </head>
    ...
    <body onload="loaded()">
    <div id="wrapper">
        <ul>
            <li>...</li>
            <li>...</li>
            ...
        </ul>
    </div>
    </body>
myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: true
});

完

下节课：一个响应式页面

作业：animation-on-touch.html

要求：手机页面，手指按下后整个屏幕变色，松开后还原，代码参考：jsbin

Made with Slides.com