原生写法：
document.getElementById("id").addEventListener("touchstart",function(e)
{
var _x=e.touches[0].pageX;
var _y=e.touches[0].pageY;
console.log("start",_x)
})
document.getElementById("id").addEventListener("touchmove",function(e)
{
var _x=e.touches[0].pageX;
var _y=e.touches[0].pageY;
console.log("move",_x)
})
document.getElementById("id").addEventListener("touchend",function(e)
{
var _x=e.changedTouches[0].pageX;
var _y=e.changedTouches[0].pageY;
console.log("end",_x)
})
JQuery写法：
$('#id').on('touchstart',function(e) {
var _touch = e.originalEvent.targetTouches[0];
var _x= _touch.pageX;
});
$('#id').on('touchmove',function(e) {
var _touch = e.originalEvent.targetTouches[0];
var _x= _touch.pageX;
});
$('#id').on('touchend',function(e) {
var _touch = e.originalEvent.changedTouches[0];
var _x= _touch.pageX;
}
1、touch事件的回调参数event有targetTouches，touches以及changedTouches三个手指对象列表，如果是用JQuery进行绑定，则三个对象列表包含在回调函数event参数的originalEvent属性里面。
2、touchend事件中只有一个changedTouches触摸实例列表，而没有其他两个。
3、touchmove 是按一定的时间频率触发的，不同的浏览器可能触发频率不一样。
4、touchcancel事件，它是在touchmove事件被中断的时候被触发，比如，你在touchmove事件中写个弹窗，这个事件就是被中断，这样touchcancel就会被触发。
三个手指对象列表存储了触摸事件的位置等等属性，类似于鼠标事件：
touches是在屏幕上的所有手指列表；所以当手指移开触发touchend事件时，此时的手指已经不在当屏幕上，所以event是没有touches这个手指列表的。
targetTouches是当前DOM上的手指列表；所以当手指移开触发touchend事件时，此时的手指不一定在当前DOM对象上，所以event是没有targetTouches这个手指列表的。
changedTouches列表是涉及当前事件的手指列表，例如touchend事件中，移开的手指的列表，没有移开的不包含。
这三个列表都包含下面的属性：
identifier：标识触摸的唯一ID。
target：触目的DOM节点目标。
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。目前浏览器一般不支持这3个值
移动到屏幕边界的问题：
touchmove在移动过程中如果移动到移动设备的边界，touchend事件在不指定的情况下是不会执行的，当你再次触摸一下屏幕才会被触发。
对于触发超出了边界，可以这样处理：
var body = document.querySelector('body');
var pk = document.body.scrollWidth;
var pg = document.body.scrollHeight;
var pointX,pointY,targetX,targetY;
body.addEventListener('touchstart', function(e){
pointX = e.touches[0].pageX;
pointX = e.touches[0].pageX;
}, false);
body.addEventListener('touchmove', function(e){
targetX = e.targetTouches[0].pageX;
targetY = e.targetTouches[0].pageY;
if( targetX<=0 || target>=pk || targetY<=0 || targetY>=pg ){
body.ontouchend();
}
}, false);
body.ontouchend = function(){
alert("超出边界啦");
}
body.addEventListener('touchend', function(e){
alert("触摸停止");
}, false);
这里通过给节点绑定触发停止事件，在touchmove里面判断触摸点是否超出边界，如果超出，执行绑定停止事件。
touch使用实例：
function load (){
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}
}
}
window.addEventListener('load',load, false);
如何适配PC和移动端，看如下代码：
var touchEvents = {
touchstart: "touchstart",
touchmove: "touchmove",
touchend: "touchend",
/**
* @desc:判断是否pc设备，若是pc，需要更改touch事件为鼠标事件，否则默认触摸事件
*/
initTouchEvents: function () {
if (isPC()) {
this.touchstart = "mousedown";
this.touchmove = "mousemove";
this.touchend = "mouseup";
}
}
};
$(document).bind(touchEvents.touchstart, function (event) {
event.preventDefault();
});
$(document).bind(touchEvents.touchmove, function (event) {
event.preventDefault();
});
$(document).bind(touchEvents.touchend, function (event) {
event.preventDefault();
});
关于a标签
a标签的四个伪类link，visited，active，hover是专为click事件设计的，所以在触屏网站中尽量不要使用它们。
大部分伪类事件也是不可用的。但是hover需要注意，当你点击过一个按钮之后，这个按钮就会一直处于hover的状态，此时你基于这个伪类所设置的css也是起作用的。
直到你用手指点击另外一个按钮，hover状态就会转移到另一个按钮。
