移動端觸屏事件

移動端瀏覽器相容性較好，我們不需要考慮以前 js 的相容性問題，可以放心的使用原生 js 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件 touch（也稱觸控事件），android和 ios 都有。

touch 物件代表乙個觸控點。觸控點可能是一根手指，也可能是一根觸控筆。觸屏事件可響應使用者手指（或觸控筆）對螢幕或者觸控板操作。

常見的觸屏事件如下：

touchevent 是一類描述手指在觸控平面（觸控螢幕、觸控板等）的狀態變化的事件。這類事件用於描述乙個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加和減少，等等

touchstart、touchmove、touchend 三個事件都會各自有事件物件。

觸控事件物件重點我們看三個常見物件列表：

因為平時我們都是給元素註冊觸控事件，所以重點記住 targettocuhes

但是拖動元素需要當前手指的座標值 我們可以使用  targettouches[0] 裡面的pagex 和 pagey

移動端拖動的原理：    手指移動中，計算出手指移動的距離。然後用盒子原來的位置 + 手指移動的距離

手指移動的距離：  手指滑動中的位置 減去  手指剛開始觸控的位置

拖動元素三步曲：

（1） 觸控元素 touchstart： 獲取手指初始座標，同時獲得盒子原來的位置

（2） 移動手指 touchmove： 計算手指的滑動距離，並且移動盒子

（3） 離開手指 touchend:

注意： 手指移動也會觸發滾動螢幕所以這裡要阻止預設的螢幕滾動 e.preventdefault();

移動端觸屏滑動touch事件相關

移動端觸屏滑動的效果其實就是輪播，在pc的頁面上很好實現，繫結click和mouseover等事件來完成。但是在移動裝置上，要實現這種輪播的效果，就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。以下是四種touch事件 touchstart 手指放到螢幕上時觸發 tou...

移動端觸屏滑動

移動端觸屏滑動的效果其實就是輪播，在pc的頁面上很好實現，繫結click和mouseover等事件來完成。但是在移動裝置上，要實現這種輪播的效果，就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。以下是四種touch事件 touchstart 手指放到螢幕上時觸發 tou...

JS移動客戶端 觸屏滑動事件

移動端觸屏滑動的效果其實就是輪播，在pc的頁面上很好實現，繫結click和mouseover等事件來完成。但是在移動裝置上，要實現這種輪播的效果，就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。以下是四種touch事件 touchstart 手指放到螢幕上時觸發 tou...