移动端触摸事件

原文链接：http://caibaojian.com/641.html

触摸事件

via三种在规范中列出并跨移动设备广泛实现的基本触摸事件：原文来自：http://caibaojian.com/641.html

• touchstart：手指放在一个 DOM 元素上。
• touchmove：手指拖动一个 DOM 元素。
• touchend：手指从一个 DOM 元素上移开。

每个触摸事件都包括了三个触摸列表：

• touches：当前位于屏幕上的所有手指动作的列表。
• targetTouches：位于当前 DOM 元素上的手指动作的列表。
• changedTouches：涉及当前事件的手指动作的列表。例如，在一个 touchend 事件中，这将是移开手指。

这些列表由包含触摸信息的对象组成：

• identifier：一个数字，用于唯一标识触摸会话中的当前手指。
• target：作为动作目标的 DOM 元素。
• 客户端/页面/屏幕坐标：动作在屏幕上发生的位置。
• 半径坐标和 rotationAngle：画出与手指形状类似的椭圆形。原文链接：http://caibaojian.com/641.html
  

  可触控的应用程序

  touchstart、touchmove 和 touchend 事件提供了一组足够丰富的功能，可支持几乎任何类型的基于触摸的交互，其中包括所有常见的多点触控手势（如开合缩放、旋转等）。

  via下面这段代码可让您使用单指触摸随意拖动一个 DOM 元素：原文来自：http://caibaojian.com/641.html

  var obj = document.getElementById('id');
  obj.addEventListener('touchmove', function(event) {
    // If there's exactly one finger inside this element
    if (event.targetTouches.length == 1) {
      var touch = event.targetTouches[0];
      // Place element where the finger is
      obj.style.left = touch.pageX + 'px';
      obj.style.top = touch.pageY + 'px';
    }
  }, false);

  下面的示例显示了屏幕上当前所有的触点，其作用就是用来感受一下设备的响应性。

  //code from http://caibaojian.com/641.html
  // Setup canvas and expose context via ctx variable
  canvas.addEventListener('touchmove', function(event) {
    for (var i = 0; i < event.touches.length; i++) {
      var touch = event.touches[i];
      ctx.beginPath();
      ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
      ctx.fill();
      ctx.stroke();
    }
  }, false);