移动端触摸事件

浏览数：24 / 时间：2015年06月11日

触摸事件

三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
     1. touchstart：手指放在一个DOM元素上。
     2. touchmove：手指拖曳一个DOM元素。
     3. touchend：手指从一个DOM元素上移开。
     每个触摸事件都包括了三个触摸列表：
     1. touches：当前位于屏幕上的所有手指的一个列表。
     2. targetTouches：位于当前DOM元素上的手指的一个列表。

3. changedTouches：涉及当前事件的手指的一个列表。
     例如，在一个touchend事件中，这就会是移开的手指。
     这些列表由包含了触摸信息的对象组成：
     1. identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。
     2. target：DOM元素，是动作所针对的目标。
     3. 客户/页面/屏幕坐标：动作在屏幕上发生的位置。
     4. 半径坐标和 rotationAngle：画出大约相当于手指形状的椭圆形

阻止缩放
缺省的多点触摸设置不是特别的好用，因为你的滑动和手势往往与浏览器的行为有关联，比如说滚动和缩放。

要禁用缩放功能的话，使用下面的元标记设置你的视图区（viewport），这样其对于用户来说就是不可伸缩的了：

content="width=device-width, initial-scale=1.0, user-scalable=no">
看看这篇关于移动HTML 5的文章，了解更多关于视图区设置的信息。

阻止滚动
     一些移动设备有缺省的touchmove行为，比如说经典的iOS overscroll效果，当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱，但要禁用它很容易。
     document.body.addEventListener(‘touchmove‘, function(event) {
        event.preventDefault();
     }, false);

细心渲染
     如果你正在编写的多点触控应用涉及了复杂的多指手势的话，要小心地考虑如何响应触摸事件，因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子，你可以在有触摸输入的时候就立刻进行绘制：
    canvas.addEventListener(‘touchmove‘, function(event) {
      renderTouches(event.touches);
    },
    不过这一技术并不是要随着屏幕上的手指个数的增多而扩充，替代做法是，可以跟踪所有的手指，然后在一个循环中做渲染，这样可获得更好的性能：
    var touches = []
    canvas.addEventListener(‘touchmove‘, function(event) {
        touches = event.touches;
    }, false);
    // 设置一个每秒60帧的定时器
    timer = setInterval(function() {
      renderTouches(touches);
    }, 15);
     提示：setInterval不太适合于动画，因为它没有考虑到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame 这一函数，基于性能和电池工作时间原因，这是一个更好的选择。一但浏览器提供了对该函数的支持，那将是首选的处理事情的方式。

使用targetTouches和changedTouches
要记住的一点是，event.touches是与屏幕接触的所有手指的一个数组，而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。