移动端触控事件

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>移动终端</title>
<script>
window.onload=function(){

var startx = 0,i=1;
var starty = 0;
var endx = 0;
var endy = 0;

mobile(up,down,left,right);//滑动的顺序依次是上下左右，不要的就补false。

function up(){
alert('你刚才向上移动了')
}
function down(){
alert('你刚才向下移动了')
}
function left(){
alert('你刚才向左移动了')
}
function right(){
alert('你刚才向右移动了')
}

function mobile(up,down,left,right){

document.addEventListener('touchstart',function(event){ //触控开始

startx = event.touches[0].pageX;
starty = event.touches[0].pageY;

},false);

document.addEventListener('touchmove',function(event){
event.preventDefault();
console.log(event.touches[0].pageX,event.touches[0].pageY);
},false);

document.addEventListener('touchend',function(event){ //触控结束

endx = event.changedTouches[0].pageX;
endy = event.changedTouches[0].pageY;

var deltax = endx - startx;
var deltay = endy - starty;

//当滑动的距离小于30px的时候不做滑动
if( Math.abs( deltax ) < 30 && Math.abs( deltay ) < 30 )
return;
// 当滑动的X轴距离大于，Y轴的滑动距离->则是水平滑动，否则就是垂直滑动
if( Math.abs( deltax ) >= Math.abs( deltay ) )
{
if( deltax > 0 )//触控结束的X轴坐标大于触控开始的X轴坐标就是向右滑动，否则就是向左滑动
{
//move right
right();
}
else
{
//move left
left();
}
}
else{
if( deltay > 0 )//触控结束的Y轴坐标大于触控开始的Y轴坐标就是向下滑动，否则就是向上滑动（这里要注意移动设备上的Y轴的正坐标是向下的。）
{
//move down
down();
}
else
{
//move up
up();
}
}
},false);
}
};

</script>

</head>