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();