touchstart,touchmove,touchend觸控事件的小小實踐心得
阿新 • • 發佈:2019-01-13
近段時間使用html5開發一個公司內部應用,而觸控事件必然是移動應用中所必須的,剛開始以為移動裝置上或許也會支援滑鼠事件,原來是不支援的,好在webkit核心的移動瀏覽器支援touch事件,並且打包成app也毫無壓力。原本以為touch事件應該跟滑鼠事件是一樣的道理,實踐過程中雖然不難,但還是碰到了不少坑,才發現還是略有區別的。
若在pc上,則使用滑鼠事件,在移動裝置中,就使用觸控事件,就這麼簡單,判斷是否pc也很方便,就不做多解釋了。
$(document).bind(touchEvents.touchstart, function (event) { event.preventDefault(); }); $(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上,則使用滑鼠事件,在移動裝置中,就使用觸控事件,就這麼簡單,判斷是否pc也很方便,就不做多解釋了。