js移動端特效-1
阿新 • • 發佈：2022-04-15
觸屏事件
移動端的瀏覽器相容性較好，不需要考慮 JS 的相容性問題，可以放心的使用原生 JS 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件 touch，Android 和 IOS 都有。
touch 物件代表一個觸控點。可能是一根手指、一根觸控筆。觸屏事件可以響應使用者手指(或觸控筆)對螢幕或觸控板操作。
| 觸屏touch事件 | 說明 |
| touchstart | 手指觸控到一個 DOM 元素時觸發 |
| touchmove | 手指在一個 DOM 元素上滑動時觸發 |
| touchend | 手指從一個 DOM 元素上移開時觸發 |
觸屏事件物件
TouchEvent 是一類描述手指在觸控平面（觸控式螢幕、觸控板等）的狀態變化的事件。這類事件用於描述一個或多個觸點，使開發者可以檢測觸點的移動，觸點的增加的減少等。touchstart、touchmove、touchend 三個事件都有各自的事件物件。
| 觸控列表 | 說明 |
| touches | 正在觸控式螢幕幕的所有手指的一個列表 |
| targetTouches | 正在觸控當前DOM元素上的手指的一個列表 |
| changedTouches | 手指狀態發生了改變的列表，從無到有，從有到無變化 |
移動端拖動元素
1、touchstart、touchmove、touchend 可以實現拖動元素。
2、拖動元素需要當前手指的座標值，可以使用 targetTouches[0] 裡面的 pageX 和 pageY。
3、移動端拖動的原理：手指移動中，計算出手指移動的距離，然後用盒子原來的位置 + 手指移動的距離。
4、手指移動的距離：手指滑動中的位置減去手指剛開始觸控的位置。
注意：手指移動也會觸發滾動螢幕所以這裡要阻止預設的螢幕滾動 e.preventDefault()。