html5手机触屏touch事件介绍

HTML5 中新添加了不少事件，但兼容性问题一直是实际开发中的痛点，很多功能暂时还不太敢用到生产环境里。所以这里先跳过那些还不成熟的，直接聊聊目前应用最广、兼容性也相对靠谱的一类——触摸事件。等日后浏览器支持度上来了，再慢慢补充。

重点说清楚这几个触摸事件：

touchstart：手指刚碰到屏幕时触发。
touchmove：手指在屏幕上滑动时持续触发。
touchend：手指离开屏幕时触发。

每个触摸事件里都藏着三个触摸列表，它们各自记录着一组触摸点——这正是多点触控得以实现的基础：

touches：当前屏幕上所有手指的信息列表。
targetTouches：落在当前 DOM 元素上的手指信息列表。
changedTouches：与当前事件直接相关的手指信息列表（比如手指抬起时，它只记录抬起的那根）。

而每个触摸点本身又包含一系列属性，常用的有这么几个：

identifier：一个数值，唯一标识一次触摸会话中的某根手指。在 Android 4.1 的 UC 浏览器上，通常从 0 开始流水编号。
target：触发动作的 DOM 元素。
pageX / pageY / clientX / clientY / screenX / screenY：分别表示手指在屏幕上的位置坐标。其中 page 包含滚动距离，client 不包含，screen 则以屏幕物理像素为基准。
radiusX / radiusY / rotationAngle：用来近似描述手指形状的椭圆参数——两个半径和旋转角度。初步测试下来，浏览器支持度还不理想，好在日常开发中用得不多，欢迎有实际踩坑经验的朋友补充。

下面是一段常用示例，演示如何让一个元素跟随手指移动：

复制代码

代码如下:

var obj = document.getElementByIdx_x('id');

obj.addEventListener('touchmove', function(event) {

// 如果这个元素的位置内只有一个手指的话

if (event.targetTouches.length == 1) {

event.preventDefault(); // 阻止浏览器默认事件，重要

var touch = event.targetTouches[0];

// 把元素放在手指所在的位置

obj.style.left = touch.pageX-50 + 'px';

obj.style.top = touch.pageY-50 + 'px';

}

}, false);

以上就是 HTML5 手机触屏 touch 事件的核心要点，覆盖了基本事件、触摸列表和常用属性。配合上面的代码示例，应该能应付大多数移动端交互场景。随着浏览器兼容性逐步改善，未来还会有更多触摸相关的 API 值得关注。