移動端筆記——jQuery touch事件

標籤：touch   執行個體   als   htm   new   回調   簡單   hone   array   

判斷移動端還是pc端
function IsPC() 

{              var  userAgentInfo = navigator.userAgent;              var  Agents =  new  Array( "Android" ,  "iPhone" ,  "SymbianOS" ,  "Windows Phone" ,  "iPad" ,  "iPod" );              var  flag =  true ;              for  ( var  v = 0; v < Agents.length; v++) {                  if  (userAgentInfo.indexOf(Agents[v]) > 0) { flag =  false ;  break ; }              }              return  flag;  }         $(document).bind(touchEvents.touchstart,  function  (event) {      event.preventDefault();       });<br> $(document).bind(touchEvents.touchmove,  function  (event) {      event.preventDefault();       });  $(document).bind(touchEvents.touchend,  function  (event) {      event.preventDefault();       });很多博文中稱touch的三個事件都有targetTouches，touches以及changedTouches對象列表，其實不然，touchend事件中應該是只有個changedTouches觸摸執行個體列表的，而且這裡說明一下，回呼函數的event只是一個普通的object對象，實際上event中有一個originalEvent屬性，這才是真正的touch事件，這個事件中才存在著上訴三個觸摸執行個體列表，這三個執行個體儲存了觸摸事件的位置等等屬性，類似於滑鼠事件。其他地方基本與滑鼠事件是一致的。簡單介紹一下這三個觸摸列表，touches是在螢幕上的所有手指列表，targetTouches是當前DOM上的手指列表，所以當手指移開觸發touchend事件時，event.originalEvent是沒有這個targetTouches列表的，而changedTouches列表是涉及當前事件的列表，例如touchend事件中，手指移開。接下來談談pc與移動端的適配問題，既然使用html5，當然是看中他的跨平台特性了，不僅僅要ios和android適配，pc上直接開啟網頁最好也是可以的，但是pc上只支援滑鼠事件怎麼辦。好辦，仔細觀察上面代碼的觸摸事件，touchEvents.touchXXX，看如下代碼：

var touchEvents = {        touchstart: "touchstart",        touchmove: "touchmove",        touchend: "touchend",        /**         * @desc:判斷是否pc裝置，若是pc，需要更改touch事件為滑鼠事件，否則預設觸摸事件         */        initTouchEvents: function () {            if (isPC()) {                this.touchstart = "mousedown";                this.touchmove = "mousemove";                this.touchend = "mouseup";            }        }    };

 若在pc上，則使用滑鼠事件，在行動裝置中，就使用觸摸事件，就這麼簡單。出處：http://blog.csdn.net/jiangcs520/article/details/17564065

移動端筆記——jQuery touch事件