點擊右上方紅色按鈕關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

首先，移動端事件，我們大概可以分成三類，觸摸事件，手勢事件和感測器事件。而在這三類事件中，應用最廣的事件就是觸摸事件了。所以很有必要對它有一個清晰的認識，只有這樣，你才能靈活的將它應用到不同的業務中。

一，看一下它的定義

觸摸事件是一個從觸摸到移動，然後離開的過程，這跟PC端的滑鼠事件非常相似，如同mousedown，mousemove和mouseup，表示滑鼠的按下，移動和釋放。

主要分以下四類：

1、touchstart - 當手指觸摸屏幕時觸發

2、touchmove - 當手指在屏幕上滑動時觸發

3、touchend - 當手指離開屏幕時觸發

4、touchcancel - 當系統停止跟蹤觸摸時觸發

二，內部結構解析

移動端事件傳遞信息的機制是相同的，都是通過Event對象傳遞信息。觸摸事件，Event對象是TouchEvent類型，除了包含一般事件都有的信息外，還包含下面這些：

• touches - 表示當前跟蹤的觸摸操作touch對象的集合

• targetTouches - 當前事件目標上touch對象的的集合

• changeTouches - 表示至上次觸摸發生了改變的touch對象的集合

最重要的是：每一個touch對象同樣包含相關事件信息如下：

1、clientX - 觸摸目標在視口中的X坐標

2、clinetY - 觸摸目標在視口中的Y坐標

3、pageX - 觸摸目標在頁面中的X坐標

4、pageY - 觸摸目標在頁面中的Y坐標

5、screenX - 觸摸目標在屏幕中的X坐標

6、screenY - 觸摸目標在屏幕中的Y坐標

7、target - 觸摸的DOM節點

三，看一下實例

代碼：

效果：

總結一下：

移動事件中，除了觸摸事件之處，還有手勢事件和感測器事件等。這些也只需要關注和了解。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！