移動端滑動事件

標籤：

   安卓webview下使用zepto的swipe時遇到的問題

   （使用zepto的swipe時必須引用touch.js，不然很多移動端瀏覽器swipe會失靈。）

   我想要用swipeLeft/swipeRight監聽向左向右滑動事件，如果只是單純為元素增加swipeLeft/swipeRight事件的話在webview下是不生效的，如果這個頁面不需要上下滑動的話，完全可以用

$(‘body‘).bind("touchmove", function(e) {     e.preventDefault();});

解決。即取消body的touchmove預設行為即可。但這種做法太絕對太暴力了，如果頁面需要上下滑動的話，那就會出問題。這裡有兩種情況，第一種是頁面內的某個元素需要上下滑動，另一種是頁面需要上下滑動。第一種情況，只是頁面內某個元素需要上下滑動的話，可為這個元素監聽touchmove事件，阻止冒泡。比如：

$(id).bind("touchmove", function(e) {     e.stopPropagation()});

那如果是整個頁面需要上下滑動，就全部用touch(touchStart/touchmove/touchEnd)類比實現（在安卓webview下我類比的swipe手勢並不會觸發touchend事件，我想這應該也是zepto自己封裝的swipe事件失效的原因，思路是在使用者剛開始滑動的時候，判斷使用者是想上下滑動還是左右滑動，上下滑動的話不做處理，左右滑動的話，對touchmove事件進行preventDefault()操作。）

jquery不支援swipe事件，需應用jquery mobile



原生javascript touch事件,touchstart,touchmove,touchend

   三種在規範中列出並獲得跨行動裝置廣泛實現的基本觸摸事件：

   1. touchstart ：手指放在一個DOM元素上。
   2. touchmove ：手指拖曳一個DOM元素。
   3. touchend ：手指從一個DOM元素上移開。

   每個觸摸事件都包括了三個觸摸列表：

   1. touches ：當前位於螢幕上的所有手指的一個列表。
   2. targetTouches ：位於當前DOM元素上的手指的一個列表。
   3. changedTouches ：涉及當前事件的手指的一個列表。

   例如，在一個touchend事件中，這就會是移開的手指。

   這些列表由包含了觸摸資訊的對象組成：

   1. identifier ：一個數值，唯一標識觸摸會話（touch session）中的當前手指。
   2. target ：DOM元素，是動作所針對的目標。
   3. 客戶/頁面/螢幕座標 ：動作在螢幕上發生的位置。
   4. 半徑座標和 rotationAngle ：畫出大約相當於手指形狀的橢圓形。

例如:
document.body.addEventListener(‘touchmove‘, function(event) { 
event.preventDefault(); 
}, false);

移動端滑動事件