Android-WebApp《基礎》-JS觸摸事件

一、手機上的觸摸事件

基本事件：

touchstart //手指剛接觸屏幕時觸發
touchmove //手指在屏幕上移動時觸發
touchend //手指從屏幕上移開時觸發

下面這個比較少用：
touchcancel //觸摸過程被系統取消時觸發
每個事件都有以下列表，比如touchend的targetTouches當然是 0 咯：

touches //位於屏幕上的所有手指的列表
targetTouches //位於該元素上的所有手指的列表
changedTouches //涉及當前事件的所有手指的列表
每個事件有列表，每個列表還有以下屬性：

其中座標常用pageX,pageY：

pageX    //相對於頁面的 X 座標
pageY    //相對於頁面的 Y 座標
clientX  //相對於視區的 X 座標
clientY  //相對於視區的 Y 座標
screenX  //相對於屏幕的 X 座標
screenY  //相對於屏幕的 Y 座標

identifier // 當前觸摸點的惟一編號
target   //手指所觸摸的 DOM 元素碼

其他相關事件：

event.preventDefault（） //阻止觸摸時瀏覽器的縮放、滾動條滾動
var supportTouch = “createTouch” in document //判斷是否支持觸摸事件
更多深入內容？點擊：http://www.cesclub.com/bw/jishuzhongxin/Webjishu/2011/1216/18069.html

二、示例

以下是獲取不同類型滑動的代碼具體做法，結合前人的思想，封裝好了，可以借鑑學習：

var touchFunc = function(obj,type,func) {
    //滑動範圍在5x5內則做點擊處理，s是開始，e是結束
    var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
    var sTime = 0, eTime = 0;
    type = type.toLowerCase();

    obj.addEventListener("touchstart",function(){
        sTime = new Date().getTime();
        init.sx = event.targetTouches[0].pageX;
        init.sy = event.targetTouches[0].pageY;
        init.ex = init.sx;
        init.ey = init.sy;
        if(type.indexOf("start") != -1) func();
    }, false);

    obj.addEventListener("touchmove",function() {
        event.preventDefault();//阻止觸摸時瀏覽器的縮放、滾動條滾動
        init.ex = event.targetTouches[0].pageX;
        init.ey = event.targetTouches[0].pageY;
        if(type.indexOf("move")!=-1) func();
    }, false);

    obj.addEventListener("touchend",function() {
        var changeX = init.sx - init.ex;
        var changeY = init.sy - init.ey;
        if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
            //左右事件
            if(changeX > 0) {
                if(type.indexOf("left")!=-1) func();
            }else{
                if(type.indexOf("right")!=-1) func();
            }
        }
        else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
            //上下事件
            if(changeY > 0) {
                if(type.indexOf("top")!=-1) func();
            }else{
                if(type.indexOf("down")!=-1) func();
            }
        }
        else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
            eTime = new Date().getTime();
            //點擊事件，此處根據時間差細分下
            if((eTime - sTime) > 300) {
                if(type.indexOf("long")!=-1) func(); //長按
            }
            else {
                if(type.indexOf("click")!=-1) func(); //當點擊處理
            }
        }
        if(type.indexOf("end")!=-1) func();
    }, false);
};