为什么要用触摸事件？
触摸事件是移动浏览器特有的HTML5事件，但这当然不是用触摸事件的主要理由。因为移动端的click有很大延迟（大约300ms），300ms延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。而触摸事件的延迟则是非常短的，使用触摸事件的能够提高页面响应速度，带来更好的用户体验。
标准的触摸事件
Webkit内的触摸事件
| 事件名称 | 描述 | 包含touches数组 |
|---|---|---|
| touchstart | 触摸开始（用户把手指放在屏幕上） | 是 |
| touchmove | 接触点改变（用户在屏幕上移动他的手指且手指不离开屏幕） | 是 |
| touchend | 触摸结束（用户的手指离开屏幕） | 是 |
| touchcancel | 触摸被取消（触摸被一些事情中断，比如通知） | 否 |
P.S.touches数组是触摸对象数组，触摸对象携带着我想要的数据
触摸对象的属性
| 属性 | 描述 |
|---|---|
| identifier | 本次触摸的唯一标识符，只要用户的手指保持在屏幕上，这个值就不会改变 |
| screenX | 触点相对于屏幕左侧的距离 |
| screenY | 触点相对于屏幕顶部的距离 |
| clientX | 触点相对于浏览器窗口左侧的距离 |
| clientY | 触点相对于浏览器窗口顶部的距离 |
| pageX | 触点相对于页面左侧的距离 |
| pageY | 触点相对于页面顶部的距离 |
| target | 获取事件源，类似于event.target |
P.S.其实还有三个属性：radiusX/radiusY，rotationAngle，force但由于兼容性差且浏览器实现有差异，在此不做介绍
IE10的触摸事件
IE指针事件
| 事件名称 | 描述（在触摸设备上） |
|---|---|
| MSPointerDown | 触摸开始 |
| MSPointerMove | 接触点移动 |
| MSPointerUp | 触摸结束 |
| MSPointerOver | 触摸点移动到元素内，相当于mouseover |
| MSPointerOut | 触摸点离开元素，相当于mouseout |
P.S.IE叫指针事件，因为该事件有三种触发形式：鼠标单击，电子笔轻触和手指触摸
MSPointerEvent属性
| 属性 | 描述 |
|---|---|
| hwTimestamp | 创建事件的时间（ms） |
| isPrimary | 标识该指针是不是主指针 |
| pointerId | 指针的唯一ID（类似于触摸事件的标识符） |
| pointerType | 一个整数，标识了该事件来自鼠标、手写笔还是手指 |
| pressure | 笔的压力，0-255，只有手写笔输入时才可用 |
| rotation | 0-359的整数，光标的旋转度（如果支持的话） |
| tiltX/tiltY | 手写笔的倾斜度，只有用手写笔输入时才支持 |
检测pointerType：
function handleEvent(event){
switch(event.pointerType){
case event.MSPOINTER_TYPE_TOUCH:
//手指
break;
case event.MSPOINTER_TYPE_PEN:
//手写笔
break;
case event.MSPOINTER_TYPE_MOUSE:
//鼠标
break;
default:
break;
}
}
document.body.addEventListener("MSPointerDown", handleEvent, false);
封装好tap事件源码：（tap即移动端的click）
(function(){
var TOUCHSTART, TOUCHEND;
//normal touch events
if (typeof(window.ontouchstart) != 'undefined') {
TOUCHSTART = 'touchstart';
TOUCHEND = 'touchend';
//microsoft touch events
} else if (typeof(window.onmspointerdown) != 'undefined') {
TOUCHSTART = 'MSPointerDown';
TOUCHEND = 'MSPointerUp';
} else {
TOUCHSTART = 'mousedown';
TOUCHEND = 'mouseup';
}
function NodeFacade(node){
this._node = node;
}
NodeFacade.prototype.getDomNode = function() {
return this._node;
}
NodeFacade.prototype.on = function(evt, callback, scope) {
var scopeObj;
if(!scope) {
scopeObj = this._node;
} else{
scopeObj = scope;
}
if (evt === 'tap') {
this._node.addEventListener(TOUCHSTART, function() {
callback.apply(scope, arguments);
});
} else if (evt === 'tapend') {
this._node.addEventListener(TOUCHEND, function() {
callback.apply(scope, arguments);
});
} else {
this._node.addEventListener(evt, function() {
callback.apply(scope, arguments);
});
}
return this;
}
window.$ = function(selector) {
var node = document.querySelector(selector);
if(node) {
return new NodeFacade(node);
} else {
return null;
}
}
})();
P.S.以上源码来自touch-interfaces.com
参考资料
《HTML5触摸界面设计与开发》
原文地址：http://www.ayqy.net/blog/html5触摸事件/?utm_source=tuicool&utm_medium=referral