JavaScript for Mobile

目录

  1. Touch Events
  2. FastClick
  3. iScroll

触摸事件

touch events

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

更多:从 event 中获取更多信息(touches)

然而 JS 没有滑动事件

Fastclick

快点击?

手机上Click延迟300ms

早期 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 的问题?

iScroll 库介绍

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

JavaScript for Mobile

By 方方

JavaScript for Mobile

  • 1,845