JavaScript手机触摸滑动事件处理

js的左右滑动触屏事件，主要有三个事件：

　　touchstart，touchmove，touchend。这三个事件最重要的属性是 pageX和 pageY,表示X,Y坐标。

touchstart：

　　在触摸开始时触发事件

touchend：

　　在触摸结束时触发事件

touchmove：

　　这个事件比较奇怪，按道理在触摸到过程中不断激发这个事件才对，但是在我的 Android 1.5 中，在 touchstart 激发后激发一次，然后剩余的都和 touchend 差不多同时激发。

这三个事件都都有一个 timeStamp 的属性，查看 timeStamp 属性，可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend。

PS:1.touch事件跟click事件是不会被同时触发的。现在的移动设备做的比较好，已经把这个问题完美的避免掉了。

下面是二段代码实例：

document.getElementsByTagName_r('body')[0].addEventListener('touchstart', function (e) {
        nStartY = e.targetTouches[0].pageY;
        nStartX = e.targetTouches[0].pageX;
    });

document.getElementsByTagName_r('body')[0].addEventListener('touchend', function (e) {
        nChangY = e.changedTouches[0].pageY;
        nChangX = e.changedTouches[0].pageX;

});

//全局变量，触摸开始位置
var startX = 0, startY = 0;

//touchstart事件
function touchSatrtFunc(evt){
    try {
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
        
        var touch = evt.touches[0]; //获取第一个触点
        var x = Number(touch.pageX); //页面触点X坐标
        var y = Number(touch.pageY); //页面触点Y坐标
        //记录触点初始位置
        startX = x;
        startY = y;
        
        var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
        console.log(text);
    } 
    catch (e) {
        alert('touchSatrtFunc：' + e.message);
    }
}

//touchend事件
function touchEndFunc(evt){
    try {
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
		nChangX = evt.changedTouches[0].pageX;
        nChangY = evt.changedTouches[0].pageY;
		if(nChangX - startX > 10){
			slideButton("left");
		}else if(nChangX - startX < -10){
			slideButton("right");
		}
    } 
    catch (e) {
        alert('touchEndFunc：' + e.message);
    }
}

//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt){
    try {
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
        var touch = evt.touches[0]; //获取第一个触点
        var x = Number(touch.pageX); //页面触点X坐标
        var y = Number(touch.pageY); //页面触点Y坐标
        var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';
        
        //判断滑动方向
        if (x - startX != 0) {
            text += '<br/>左右滑动';
        }
        if (y - startY != 0) {
            text += '<br/>上下滑动';
        }
        
        console.log(text);
    } 
    catch (e) {
        alert('touchMoveFunc：' + e.message);
    }
}

//绑定事件
function bindEvent(obj){
	if(obj){
		obj.addEventListener('touchstart', touchSatrtFunc, false);
    	obj.addEventListener('touchmove', touchMoveFunc, false);
    	obj.addEventListener('touchend', touchEndFunc, false);
	}
//	document.addEventListener('touchstart', touchSatrtFunc, false);
//  document.addEventListener('touchmove', touchMoveFunc, false);
//  document.addEventListener('touchend', touchEndFunc, false);
}

bindEvent(document.getElementById("bodyButton"));

//判断是否支持触摸事件
function isTouchDevice(){
    
    
    try {
        document.createEvent("TouchEvent");
        console.log("支持TouchEvent事件！" + navigator.appVersion);
        bindEvent(); //绑定事件
    } 
    catch (e) {
        alert(navigator.appVersion + "不支持TouchEvent事件！" + e.message);
    }
}

isTouchDevice();