移動端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 二、示例 以下是擷取不同類型滑動的代碼具體做法，結合前人的思想，封裝好了，可以借鑒學習： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 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 ); };

• 原文位址：http://www.zixuephp.com/wzqd/2014_09/387.html