TouchEvent
TouchEvent 介面表示一個 UIEvent,當觸控敏感表面的接觸狀態發生變化時傳送。此表面可以是觸控式螢幕或觸控板,例如。該事件可以描述螢幕上一個或多個接觸點,並支援檢測接觸點的移動、新增和移除等。
觸控點由 Touch 物件表示;每個觸控點都由位置、大小和形狀、壓力以及目標元素描述。觸控點列表由 TouchList 物件表示。
建構函式
TouchEvent()-
建立一個
TouchEvent物件。
例項屬性
此介面繼承自其父介面 UIEvent 和 Event 的屬性。
TouchEvent.altKey只讀-
一個布林值,指示觸發觸控事件時 alt 鍵是否被按下。
TouchEvent.changedTouches只讀-
一個
TouchList,其中包含所有Touch物件,這些物件代表了在之前的觸控事件和當前事件之間狀態發生變化的個人接觸點。 TouchEvent.ctrlKey只讀-
一個布林值,指示觸發觸控事件時 control 鍵是否被按下。
TouchEvent.metaKey只讀-
一個布林值,指示觸發觸控事件時 meta 鍵是否被按下。
TouchEvent.shiftKey只讀-
一個布林值,指示觸發觸控事件時 shift 鍵是否被按下。
TouchEvent.targetTouches只讀-
一個
TouchList,包含所有當前與觸控表面接觸的Touch物件,並且這些物件也是在與事件目標相同的元素上開始觸控的。 TouchEvent.touches只讀TouchEvent.rotation非標準 只讀-
自事件開始以來的旋轉變化(以度為單位)。正值表示順時針旋轉;負值表示逆時針旋轉。初始值:
0.0。 TouchEvent.scale非標準 只讀-
自事件開始以來兩個手指之間的距離。表示為初始手指距離的浮點數倍。小於 1.0 的值表示向內捏合(縮小)。大於 1.0 的值表示向外張開(放大)。初始值:
1.0。
觸控事件型別
有幾種型別的事件可以觸發,以指示發生了與觸控相關的更改。您可以透過檢視事件的 TouchEvent.type 屬性來確定發生了哪種事件。
touchstart-
當用戶將觸控點放在觸控表面上時傳送。事件的目標將是發生觸控的
element。 touchend-
當用戶將觸控點從表面移開時傳送;也就是說,當他們抬起手指或觸控筆離開表面時。如果觸控點移出表面的邊緣,也會發送此事件;例如,如果使用者的手指滑出了螢幕邊緣。
事件的目標是與觸控點相對應的
touchstart事件所接收的同一個element,即使觸控點已移出該元素之外。可以從
changedTouches屬性指定的TouchList中找到從表面移除了的一個或多個觸控點。 touchmove-
當用戶沿表面移動觸控點時傳送。事件的目標是與觸控點相對應的
touchstart事件所接收的同一個element,即使觸控點已移出該元素之外。如果觸控點的 radius、rotation angle 或 force 屬性的值發生變化,也會發送此事件。
注意:
touchmove事件的傳送速率是瀏覽器特定的,並且可能因使用者硬體的功能而異。您不應依賴於這些事件的特定粒度。 touchcancel-
當觸控點因某種原因被中斷時傳送。可能發生這種情況的原因有多種(確切原因因裝置和瀏覽器而異)。
與 addEventListener() 和 preventDefault() 一起使用
值得注意的是,在許多情況下,觸控事件和滑鼠事件都會被髮送(以允許非觸控特定的程式碼仍能與使用者進行互動)。如果您使用觸控事件,則應呼叫 preventDefault() 以防止滑鼠事件也被髮送。
例外情況是 Chrome,從 56 版本開始(桌面版、Chrome for Android 和 Android webview),touchstart 和 touchmove 的 passive 選項的預設值為 true,呼叫 preventDefault() 將不起作用。要覆蓋此行為,您需要將 passive 選項設定為 false,之後呼叫 preventDefault() 將按預期工作。將偵聽器預設視為 passive 的更改可防止偵聽器在使用者滾動時阻止頁面渲染。Chrome 開發者網站上提供了演示:Chrome Developer。
示例
請參閱 主觸控事件文章中的示例。
規範
| 規範 |
|---|
| 觸控事件 # touchevent-interface |
瀏覽器相容性
載入中…