市面上手机种类繁多，在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的。由于设备的不同浏览器的事件的设计也不同。传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可以使用，但是效果不够好。PC上还没有哪个事件是可以与触屏手机的触摸事件对应的，为了更好的用户体验，移动站点的建设也需要对不同的事件进行处理。
介绍几种兼容比较好的触摸事件，大部分触屏设备都支持的。
touchstart：触摸开始的时候触发
touchmove：触摸时手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
touchcancel：系统取消touch事件的时候触发
事件绑定，代码示例：
var obj = document.getElementById('id');
obj.addEventListener('touchstart', touchStart, false);
obj.addEventListener('touchmove', touchMove, false);
obj.addEventListener('touchend', touchEnd, false);
var touchMove = function(event) {
if (event.targetTouches.length == 1) {
// prevent default
event.preventDefault();
var touch = event.targetTouches[0];
// do something
}
};
触摸事件属性介绍
touches：当前位于屏幕上的所有触点的列表，IOS支持的比较好，目前Android系统的浏览器一般对多点触控不敏感。
targetTouches：位于当前触点之下的DOM节点。
changedTouches：事件触发时的触点。
每个触摸点由包含了如下触摸信息
identifier：唯一标识触摸会话。
target：事件目标DOM元素。
pageX/pageY/clientX/clientY/screenX/screenY：页面/窗口/屏幕的位置。
radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。
使用说明：
//touchstart 触屏开始的时候触发
//使用e.targetTouches[0] 获取触点
window.addEventListener('touchstart', function (e) {
console.info(e);
if(e.targetTouches.length==1){
var touch = e.targetTouches[0];
console.info(touch);
console.info(touch.pageX);
console.info(touch.pageY);
}
},false);
//touchmove 触屏移动过程出发
//使用e.targetTouches[0]或者e.changedTouches[0] 获取触点
document.body.addEventListener('touchmove', function (e) {
console.info(e);
if (e.targetTouches.length == 1) {
var touch = e.targetTouches[0];
console.info(touch);
console.info(touch.pageX);
console.info(touch.pageY);
}
if (e.changedTouches.length == 1) {
var touch = e.changedTouches[0];
console.info(touch);
console.info(touch.pageX);
console.info(touch.pageY);
}
console.info('--------------------------');
});
//touchend 触屏结束触发
//使用 e.changedTouches[0]获取触点
window.addEventListener('touchend', function (e) {
console.info(e);
if (e.changedTouches.length == 1) {
var touch = e.changedTouches[0];
console.info(touch);
console.info(touch.pageX);
console.info(touch.pageY);
}
}, false);
Goole浏览器下TouchEvent对象
Google下Touch对象
FF下TouchEvent对象
