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

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

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

常見(jiàn)的觸屏事件如下：

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

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

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

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

移動(dòng)端拖動(dòng)元素

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

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

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

4. 手指移動(dòng)的距離： 手指滑動(dòng)中的位置 減去 手指剛開(kāi)始觸摸的位置

拖動(dòng)元素三步曲：

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

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

(3) 離開(kāi)手指 touchend:

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