移動端觸屏事件有哪些類型？該怎么實(shí)現(xiàn)？

移動端瀏覽器兼容性較好，我們不需要考慮以前 JS 的兼容性問題，可以放心的使用原生 JS 書寫效果，但是移動端也有自己獨(dú)特的地方。比如觸屏事件 touch(也稱觸摸事件)，Android 和 IOS 都有。

touch 對象代表一個(gè)觸摸點(diǎn)。觸摸點(diǎn)可能是一根手指，也可能是一根觸摸筆。觸屏事件可響應(yīng)用戶手指(或觸控筆)對屏幕或者觸控板操作。

常見的觸屏事件如下：

TouchEvent 是一類描述手指在觸摸平面(觸摸屏、觸摸板等)的狀態(tài)變化的事件。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn)，使開發(fā)者可以檢測觸點(diǎn)的移動，觸點(diǎn)的增加和減少，等等

touchstart、touchmove、touchend 三個(gè)事件都會各自有事件對象。

觸摸事件對象重點(diǎn)我們看三個(gè)常見對象列表：

因?yàn)槠綍r(shí)我們都是給元素注冊觸摸事件，所以重點(diǎn)記住 targetTocuhes。

移動端拖動元素

1. touchstart、touchmove、touchend 可以實(shí)現(xiàn)拖動元素

2. 但是拖動元素需要當(dāng)前手指的坐標(biāo)值 我們可以使用 targetTouches[0] 里面的pageX 和 pageY

3. 移動端拖動的原理： 手指移動中，計(jì)算出手指移動的距離。然后用盒子原來的位置 + 手指移動的距離

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

拖動元素三步曲：

(1) 觸摸元素 touchstart： 獲取手指初始坐標(biāo)，同時(shí)獲得盒子原來的位置

(2) 移動手指 touchmove： 計(jì)算手指的滑動距離，并且移動盒子

(3) 離開手指 touchend:

注意： 手指移動也會觸發(fā)滾動屏幕所以這里要阻止默認(rèn)的屏幕滾動 e.preventDefault();