指標事件

從 Windows 8 開始,Internet Explorer 可支援 W3C 指標事件處理使用者輸入。指標事件是以傳統滑鼠事件為模型,但是它們使用指標的抽象概念套用所有使用者輸入形式,包括滑鼠、觸控和手寫筆。使用指標事件在使用者輸入方法上建立流暢使用者經驗的方法,是寫入一組可在硬體功能上運作的事件。

指標事件和 PointerEvent 物件

PointerEvent 物件繼承自 MouseEvent,並依據類似的使用者互動分派。

滑鼠事件對應的指標事件
mousedown pointerdown
mouseenter pointerenter
mouseleave pointerleave
mousemove pointermove
mouseout pointerout
mouseover pointerover
mouseup pointerup

 

PointerEvent 物件提供滑鼠事件中所有常用的屬性 (如 clientX /clientY 座標、target 元素及 button / buttons 屬性),也提供以下其他屬性,協助您區別輸入類型及特性:

PointerEvent 屬性說明

height

指標接觸幾何的高度 (Y 軸上的量級),以 CSS 像素表示。

isPrimary

傳回與事件關聯的指標為目前滑鼠、觸控還是手寫筆互動的主要指標。

pointerId

觸控、滑鼠或手寫筆的接觸唯一識別項。

pointerType

傳回事件來源是觸控、手寫筆還是滑鼠。

pressure

傳回指標輸入的標準化壓力,範圍為 [0,1],其中 0 和1 代表硬體能夠偵測的最小和最大壓力。

tiltX

傳回 Y-Z 平面以及包含手寫筆軸與 Y 軸的平面之間的角度,範圍為 -90 到 +90。正 X 傾斜是向右。

tiltY

傳回 X-Z 和換能器-X 平面之間的角度。正 Y 傾斜是朝向使用者。

width

傳回指標接觸幾何的寬度 (X 軸上的量級),以 CSS 像素表示。

 

滑鼠相容性

在指標事件啟動後,IE 會對主要觸控點啟動滑鼠事件 (例如,螢幕上的第一個手指)。這樣做可以讓以滑鼠事件為基礎的現有網站繼續正確運作。

和滑鼠相較之下,螢幕上可以同時有多個指標 (例如,使用多點觸控硬體)。在這些情況下,每個接觸點都會啟動個別的指標事件,因此更易於建立使用多點觸控的網站與應用程式。

功能偵測和觸控支援測試

使用 PointerEvent 介面測試指標事件支援:


if (window.PointerEvent) {
  // Pointer events are supported.
}

請注意,指標事件功能偵測並不能指出裝置本身是否支援觸控或手寫筆輸入。PointerEvent 屬性只會檢查平台是否對系統中的某個硬體啟動指標事件。

若要測試觸控功能及多點觸控支援,請使用 maxTouchPoints 屬性:


// Test for touch capable hardware 
if(navigator.maxTouchPoints) { ... }

// Test for multi-touch capable hardware
if(navigator.maxTouchPoints && navigator.maxTouchPoints > 1) { ... }

// Check the maximum number of touch points the hardware supports
var touchPoints = navigator.maxTouchPoints;

控制預設觸控處理

自 Windows 8 開始,IE 為一般觸控互動提供預設處理,包括可捲動區域的移動瀏覽、捏合縮放,以及適用於觸控的 HTML5 拖放支援 (這是由使用者按住不放並拖曳的一系列互動啟動)。您可以使用 touch-action CSS 屬性,指定特定頁面區域是否可以透過觸控輸入和預設觸控處理行為操作及其操作方式。

下列樣式規則會停用所有預設觸控處理,並將所有指標事件指向 JavaScript 程式碼:


touch-action: none;

如需詳細資訊,請參閱控制預設觸控經驗

在元素上擷取指標事件

在某些情況下,將特定指標指派給某個元素非常有用,可以確保即使在接觸移開元素之後,該元素仍然可以收到指標事件。

例如,如果使用者的手指觸碰並按住您 Web 應用程式上的 UI 按鈕,在手指提起之前就滑離開按鈕 (中斷接觸),該按鈕可能就不會收到 pointerup 事件。這會造成按鈕一直維持壓下的狀態。但是將指標指派給按鈕元素,按鈕就會收到指標事件,包括指示按鈕返回其初始狀態的 pointerup 事件。

您可以呼叫元素物件的 setPointerCapture 方法,將特定的 pointerId 指派給該元素:


window.addEventListener('pointerdown', pointerdownHandler, false);

function pointerdownHandler (evt) {
      evt.target.setPointerCapture(evt.pointerId);
}

將指標擷取到元素時,父項及子項元素會在擷取及反昇階段收到 gotpointercapture 事件。

移除指標 (pointerup) 或呼叫 releasePointerCapture 方法明確釋放指標時,就會釋放擷取。也可能出現元素失去擷取的情況。例如,如果觸控移到視窗外或其他元素擷取觸控,具有擷取的元素就會失去擷取。失去擷取的元素會收到 lostpointercapture 事件。

指標取消

使用觸控或手寫筆輸入時,有時候可以取消螢幕上的指標。例如,如果您的螢幕不支援同時超過兩個觸控點,當您在螢幕放下第三根手指時,先前兩個點中的其中一個點會被取消,因為硬體無法追蹤三個點。指標取消由 pointercancel 事件指示。這讓您有機會處理任何必要的清理。例如,如果您的應用程式維護一個指標清單,就可以接聽 pointercancel 事件,知道何時從該清單移除特定指標。

相容性注意事項

為了符合 W3C 指標事件規格的「候選建議」,Internet Explorer 11 指標事件的實作與 Internet Explorer 10 相較之下有些許變更。如需完整的詳細資訊,請參閱 IE 相容性手冊中的指標事件更新

HandJSJavaScript Polyfill 為您提供一個程式庫,針對還沒有支援 W3C 指標事件的瀏覽器撰寫指標事件模型。如需示範,請參閱以 Hand.JS 建立通用虛擬觸控搖桿

API 參考

PointerEvent

範例和教學課程

讓您的網站支援觸控操作
指標和手勢範例

Internet Explorer Test Drive 示範

曼德博瀏覽器
瀏覽器表面
觸控效果
打磚塊

IEBlog 文章

W3C 指標事件轉換為候選建議
深入了解 W3C 發佈最終工作草案的指標事件
W3C 設立指標事件工作小組
針對可在內部操控的指標事件:多個裝置輸入事件的演變
建置觸控友善之網站的指導方針
處理所有瀏覽器中的多點觸控和滑鼠輸入
IE10 和 Windows 市集應用程式的觸控輸入

規格

指標事件規格

相關主題

藉用 Hand.JS 建立適用所有觸控模型的通用虛擬觸控搖桿
手勢事件
Hand.js:支援每個瀏覽器指標事件的 Polyfill
利用觸控方式捲動和縮放
統一觸控與滑鼠:指標事件如何讓跨瀏覽器觸控支援變得輕鬆上手

 

 

顯示:
© 2014 Microsoft