移動端 Touch 事件的使用與思考（1）

elva 發布于2019-08-19 18:26 / 3765人閱讀

摘要：在中與值是相等的，在微信中兩個數值不等，但單位應該也不一樣。測試過程中及微信內置瀏覽器都不支持這些屬性，模擬器可以。也是一個對象，對于事件這個對象列出在此次事件中新增加的觸點。

本文主要介紹 TouchEvent 相關的一些對象與屬性如 Touch, TouchList, touhces, targetTouches 等，以及使用的注意點和誤區。

觸摸事件有以下幾種類型：touchstart,touchmove,touchend這三種用的比較多，還有不常用的touchcancel事件。當然 MDN上還介紹了touchenter,touchleave事件，具體適用的場景及兼容性如何還未做測試，感興趣的可自行研究。

js中不同的事件類型，event對象包含的屬性也有所差異。我們先了解幾個TouchEvent涉及的對象。

提示：文中的demo都是在 chrome 模擬器，iPhone6s(iOS9.3.2) safari，iOS微信上運行，安卓的兼容性未做測試

Touch

Touch對象代表一個觸點，可以通過event.touches[0]獲取，每個觸點包含位置，大小，形狀，壓力大小，和目標 element屬性。

{
    screenX: 511, 
    screenY: 400,//觸點相對于屏幕左邊沿的Y坐標
    clientX: 244.37899780273438, 
    clientY: 189.3820037841797,//相對于可視區域
    pageX: 244.37, 
    pageY: 189.37,//相對于HTML文檔頂部，當頁面有滾動的時候與clientX=Y 不等
    force: 1,//壓力大小，是從0.0(沒有壓力)到1.0(最大壓力)的浮點數
    identifier: 1036403715,//一次觸摸動作的唯一標識符
    radiusX: 37.565673828125, //能夠包圍用戶和觸摸平面的接觸面的最小橢圓的水平軸(X軸)半徑
    radiusY: 37.565673828125,
    rotationAngle: 0,//它是這樣一個角度值：由radiusX 和 radiusY 描述的正方向的橢圓，需要通過順時針旋轉這個角度值，才能最精確地覆蓋住用戶和觸摸平面的接觸面
    target: {} // 此次觸摸事件的目標element
}

identifier
這個屬性大家可能有疑惑，使用 Chrome 的模擬器發現多次觸摸動作，值始終不變。用真機測試則不會有問題(我這里用的safari連接mac調試)。每次觸摸包括start,move,end這整個過程，標志符都不變。下一次觸摸動作開始，標志符就會變化。

screenY clientY
在 safari 中 screenY與clientY值是相等的，在iOS微信中兩個數值不等，但單位應該也不一樣。

radiusX radiusY rotationAngle
測試過程中safari及微信內置瀏覽器都不支持這些屬性，chrome模擬器可以。

TouchList

由Touch對象構成的數組，通過event.touches取到。一個Touch對象代表一個觸點，當有多個手指觸摸屏幕時，TouchList就會存儲多個Touch對象，前面說到的identifier就用來區分每個手指對應的Touch對象。

TouchEvent

TouchEvent就是用來描述手指觸摸屏幕的狀態變化事件，除了一般DOM事件中event對像具備的屬性，還有一些特有的屬性。

touches

一個TouchList對象，包含當前所有接觸屏幕的觸點的Touch對象，不論 touchstart 事件從哪個elment上觸發。

targetTouches

也是一個TouchList對象，包含了如下觸點的 Touch 對象：touchstart從當前事件的目標element上觸發

這里大家可能產生了疑惑，這兩個對象到底有什么區別？尤其是我們使用chrome模擬器中運行 demo,打印兩個對象發現他們其實是一樣的。
這兩個對象的區別可以類比event.target與event.currentTarget 的區別，如果以前沒留意，自行 js 高級程序設計。

我們先看一個 demo2，來了解 touch 事件的特性。
在線編輯： http://jsrun.net/3XKKp
預覽地址： http://jsrun.net/rtd/3XKKp

大家進行以下兩個操作，觀察控制臺發現了什么？
操作一：一根手指觸摸藍色box，并滑動，繼續滑動出藍色box
操作二：一根手指觸摸非藍色box區域，然后慢慢滑動到藍色box

大家會發現：操作一中即使滑出藍色box，而touchmove，touchend事件會繼續觸發，touches,targetTouches存儲著相同的 Touch 對象，touchmove事件的目標元素仍然是box。
操作二中相關的 touch 事件都不會觸發。很神奇的是 touchmove 事件，明明在 box 上滑動，卻不會觸發 touchmove 事件。

我們可以猜測，touch相關的事件是一個整體，一開始touchstart不可能被觸發，則后續touch事件也不會被觸發。當然你可以不監聽 touchstart 事件，按照操作一 touchmove，touchend 還是可以觸發的。

再看下面這個demo2
在線編輯：http://jsrun.net/XXKKp
訪問地址：http://jsrun.net/rtd/XXKKp

這里我們對白色區域body也添加了 touch 事件的監聽，繼續上述 demo1中的兩個操作。
我們可以發現：

操作一可以發現：touch 相關的事件可以冒泡，觸發了 box,body的touch事件。操作二只能觸發 body 的touch 事件，和demo1同理。

我們可以觀察下操作一的兩個對象TouchEvent.targetTouches,TouchEvent.touches，無論是box還是body觸發的 touch 事件，他們的存儲的 Touch對象都是相同的，而且 target 都是 box。
接下來進行操作三：

用兩根手指，一根手指觸摸藍色box，另一根觸摸白色區域，然后滑動。

然后再次比較下targetTouches和touches，就可以發現他們的不同。

changedTouches

也是一個 TouchList 對象，對于 touchstart 事件, 這個 TouchList 對象列出在此次事件中新增加的觸點。對于 touchmove 事件，列出和上一次事件相比較，發生了變化的觸點。對于 touchend ，列出離開觸摸平面的觸點（這些觸點對應已經不接觸觸摸平面的手指）。

touchend這里要特別注意，touches和targetTouches只存儲接觸屏幕的觸點，要獲取觸點最后離開的狀態要使用changedTouches。

之前也經常用touches[0]來獲取Touch 對象，如果知道了 touches，targetTouches,changedTouches 的不同之處。在編寫代碼時可以更好的選擇使用，程序也可以更嚴謹。

續篇想研究的問題：

touchmove的觸發頻率問題

如何判定用戶是快速滑動(swipe事件)

如何實現Tap

一些使用總結或最佳實踐

參考資料

MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent

js高級程序設計

文中如理解有誤，還請多多指出！

GPU云服務器云服務器 touch事件華為云服務器移動端使用教程 Android端WebRtc編譯與使用 jsp移動焦點的事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79599.html

單點手勢庫簡單思考實現

摘要：單點手勢庫分析手勢是什么有哪些方法實現首先我這里指的手勢是指我們在移動端進行觸屏交互的時候，用戶操作的一些手勢。可以看地址總結這是我挺久之前做的移動端單點手勢庫個人博客地址學習時參考劇中人單點手勢庫分析手勢是什么？有哪些方法實現？首先我這里指的手勢是指我們在移動端進行觸屏交互的時候，用戶操作的一些手勢。在我們在移動端需要一些交互的時候。難免有時候需要左滑右滑。目前市面...

ybak 2019-08-22 15:39 評論0 收藏0
#思考# 鼠標拖拽mousemove和移動端touchmove問題

摘要：需求移動實現手指觸摸移動物體端實現鼠標拖拽物體實現移動端通過和事件實現時記錄手指按下的位置為為了方便描述移動時中獲取移動過程中的位置為計算此次移動的距離正或者負，將移動物體的絕對位置更新原始位置加上移動距離，更新的值。進入下一次移動事件需求移動實現手指觸摸移動物體 PC端實現鼠標拖拽物體實現移動端通過touchstart和touchmove事件實現 1、touchsta...

Ashin 2019-08-23 18:17 評論0 收藏0
我是如何通過debug成功甩鍋瀏覽器的：解決fixed定位元素，在頁面滾動后touch事件失效問題

摘要：二分析排查一步驟一使用搜索引擎我是在無意中發現該問題的，當時觀察到的現象是綁定在上的事件有時會被觸發，有時會失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應事件失效的原因。接下來的事很簡單，繼續搜索事件在頁面滾動后失效。如果你關注我應該知道，我最近對PC端頁面進行移動適配。在這個過程中，為了節省用戶300ms的時間，同時給予用戶更及時的點擊反饋（這意味著更好的用戶...

tulayang 2019-08-30 14:02 評論0 收藏0
我是如何通過debug成功甩鍋瀏覽器的：解決fixed定位元素，在頁面滾動后touch事件失效問題

摘要：二分析排查一步驟一使用搜索引擎我是在無意中發現該問題的，當時觀察到的現象是綁定在上的事件有時會被觸發，有時會失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應事件失效的原因。接下來的事很簡單，繼續搜索事件在頁面滾動后失效。如果你關注我應該知道，我最近對PC端頁面進行移動適配。在這個過程中，為了節省用戶300ms的時間，同時給予用戶更及時的點擊反饋（這意味著更好的用戶...

JowayYoung 2019-08-22 14:57 評論0 收藏0