TouchEvent

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

TouchEvent 介面表示一個 UIEvent,當觸控敏感表面的接觸狀態發生變化時傳送。此表面可以是觸控式螢幕或觸控板,例如。該事件可以描述螢幕上一個或多個接觸點,並支援檢測接觸點的移動、新增和移除等。

觸控點由 Touch 物件表示;每個觸控點都由位置、大小和形狀、壓力以及目標元素描述。觸控點列表由 TouchList 物件表示。

Event UIEvent TouchEvent

建構函式

TouchEvent()

建立一個 TouchEvent 物件。

例項屬性

此介面繼承自其父介面 UIEventEvent 的屬性。

TouchEvent.altKey 只讀

一個布林值,指示觸發觸控事件時 alt 鍵是否被按下。

TouchEvent.changedTouches 只讀

一個 TouchList,其中包含所有 Touch 物件,這些物件代表了在之前的觸控事件和當前事件之間狀態發生變化的個人接觸點。

TouchEvent.ctrlKey 只讀

一個布林值,指示觸發觸控事件時 control 鍵是否被按下。

TouchEvent.metaKey 只讀

一個布林值,指示觸發觸控事件時 meta 鍵是否被按下。

TouchEvent.shiftKey 只讀

一個布林值,指示觸發觸控事件時 shift 鍵是否被按下。

TouchEvent.targetTouches 只讀

一個 TouchList,包含所有當前與觸控表面接觸的 Touch 物件,並且這些物件也是在與事件目標相同的元素上開始觸控的。

TouchEvent.touches 只讀

一個 TouchList,包含所有表示與表面接觸點的 Touch 物件,無論其目標或變化狀態如何。

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

當觸控點因某種原因被中斷時傳送。可能發生這種情況的原因有多種(確切原因因裝置和瀏覽器而異)。

  • 發生了一些導致觸控取消的事件;例如,如果在互動過程中彈出了模態警告框。
  • 觸控點已離開文件視窗並移入瀏覽器的 UI 區域、外掛或其他外部內容。
  • 使用者在螢幕上放置的觸控點數量超出了支援的範圍,在這種情況下,TouchList 中的最早的 Touch 會被取消。

與 addEventListener() 和 preventDefault() 一起使用

值得注意的是,在許多情況下,觸控事件和滑鼠事件都會被髮送(以允許非觸控特定的程式碼仍能與使用者進行互動)。如果您使用觸控事件,則應呼叫 preventDefault() 以防止滑鼠事件也被髮送。

例外情況是 Chrome,從 56 版本開始(桌面版、Chrome for Android 和 Android webview),touchstarttouchmovepassive 選項的預設值為 true,呼叫 preventDefault() 將不起作用。要覆蓋此行為,您需要將 passive 選項設定為 false,之後呼叫 preventDefault() 將按預期工作。將偵聽器預設視為 passive 的更改可防止偵聽器在使用者滾動時阻止頁面渲染。Chrome 開發者網站上提供了演示:Chrome Developer

示例

請參閱 主觸控事件文章中的示例

規範

規範
觸控事件
# touchevent-interface

瀏覽器相容性

另見