三项基本的触摸事件已经在移动设备上广泛使用。
1. touchstart: 一根手指放置在DOM元素上
2. touchmove: 一根手指在DOM元素上拖动
3. touchend: 一根手指离开了DOM元素
4. touchcancel: 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

每个触摸事件包括三个属性:
1. touches: 当前位于屏幕上的触点
2. targetTouches: 在当前DOM元素上的所有触点
3. changedTouches: 当前时间涉及的手指。例如,在一个touchend事件中,给出的是被释放的手指

这些属性又都包括以下属性信息:
1. identifier: 一个数字, 每个触摸过程中的触点的唯一标识
2. target: 动作指向的DOM元素目标
3. client / page / screen 坐标: 动作发生在屏幕的哪个位置
详细如下:
clientX / clientY:// 触摸点相对于浏览器窗口viewport的位置
pageX / pageY:// 触摸点相对于页面的位置
screenX / screenY:// 触摸点相对于屏幕的位置

示例:

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  event.preventDefault();  //这个可以屏幕浏览器默认的处理
  // 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);

有时touch事件会跟浏览器的行为有所冲突,以下可以禁用一些冲突行为

禁用缩放

 

参考链接: http://www.html5rocks.com/en/mobile/touch/

标签: touchevent

添加新评论