移動端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);};

移動端JS 觸摸事件基礎