移动端触摸事件 【转】

标签：style   blog   http   io   color   ar   os   使用   sp   

触摸事件 

三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
     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更有用一些。

    最后一点，因为你是在为移动设备做开发，因此你应该要留心移动的最佳做法，这些在Eric Bidelman的文章中有论及，以及要了解这一W3C文档。

转自：http://blog.163.com/rex_blog/blog/static/1944801012013102743014369/

移动端触摸事件 【转】

标签：style   blog   http   io   color   ar   os   使用   sp   

原文地址：http://www.cnblogs.com/lxiang/p/4086721.html