Internet Explorer 10 的指標和手勢事件

附註  如需有關這些主題的最新概觀,請參閱指標事件手勢事件主題。
注意  W3C 指標事件規格從在 Internet Explorer 10 中實作之後,已經過多次改版。此外,指標事件 API 上的 MS 廠商首碼從 Internet Explorer 11 開始就已過時。如需變更的摘要以及相容性最佳做法,請參閱指標事件更新

Internet Explorer 10 以及 Windows 8 中使用 JavaScript 的 Windows 市集應用程式,引入了對 Web 平台上處理觸控和手寫筆輸入的支援。Internet Explorer 10 引入了「指標」的概念,讓您不需要分別建立處理每種輸入類型的程式碼。

指標是螢幕上的任何觸控點:可以是滑鼠、手指或手寫筆。您現在可以在任何輸入硬體和規格上提供一致的使用經驗,只要寫入一組指標事件,並封裝從滑鼠、觸控以及手寫筆的輸入即可。

指標事件

和滑鼠事件類似,每個指標按下、移動、提起、暫留、離開都會啟動「指標事件」

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

指標取消

使用觸控或手寫筆輸入時,有時候可以取消螢幕上的指標。例如,如果您的螢幕不支援同時超過兩個觸控點,當您在螢幕放下第三根手指時,先前兩個點中的其中一個點會被取消,因為硬體無法追蹤三個點。 指標取消由 MSPointerCancel 事件指示。

滑鼠相容性

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

功能偵測

以下是偵測指標事件支援的最佳方式:


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

請注意,功能偵測不是用來表示裝置支援觸控或手寫筆輸入。相反地,它是指平台是否對系統中的某個硬體啟動指標事件。

下列範例是一個基本手指繪圖應用程式,可透過指標事件和滑鼠、觸控與手寫筆一起運作。


<!DOCTYPE html>
<html>
<head>
  <title>Scribble touch example</title>
<style>
  html { 
    -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */
  }
</style>

<script>
  window.addEventListener('load', function () {
    var canvas = document.getElementById("drawSurface"),
    context = canvas.getContext("2d");
    if (window.navigator.msPointerEnabled) {
      canvas.addEventListener("MSPointerMove", paint, false);
    }
    else {
      canvas.addEventListener("mousemove", paint, false);
    }
    function paint(event) {
      // paint a small rectangle every time the event fires. 
      context.fillRect(event.clientX, event.clientY, 5, 5);
    }
  });
</script>

</head>
<body>

  <canvas id="drawSurface" width="500px" height="500px" style="border:1px solid black;">Canvas isn't supported by this browser or document mode</canvas>
</body>
</html>


觸控最佳化的常見應用

Internet Explorer 10 會針對基本觸控互動提供常見的預設處理方式,例如:

  • 可捲動區域的移動瀏覽
  • 捏合縮放
  • 按住不放操作功能表
  • 觸控選取

這些功能會自動運作,而網站與應用程式可藉此自然地提供出色的觸控使用經驗。不過,您可能會根據自己的經驗來關閉這些功能。

測試觸控支援

測試觸控功能,以及使用 msMaxTouchPoints 屬性輕鬆偵測是否支援多點觸控。若要檢查裝置是否支援觸控,而且支援時想要知道支援多少觸控點的話,請使用下列項目:

// To test for touch capable hardware 
if(navigator.msMaxTouchPoints) { ... }

// To test for multi-touch capable hardware
if(navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) { ... }

// To get the maximum number of points the hardware supports
var touchPoints = navigator.msMaxTouchPoints;


移動瀏覽和縮放

執行移動瀏覽或縮放時不會觸發指標事件。在上述的繪圖應用程式範例中,請停用區域的移動瀏覽和縮放,視您的需求使用這些事件。例如,您可以使用階層式樣式表 (CSS) 來這樣做。


.disablePanZoom {
  -ms-touch-action: none; /* Disables all pan/zoom behaviors and fire pointer events in JavaScript instead. */
}

觸控選取

在 Internet Explorer 10 中,點選文字或文字附近即可透過觸控功能來選取文字。如果您要停用文字選取,其方式和您在 Windows Internet Explorer 9 進行的方式完全相同。


element.addEventListener("selectstart", function(e) { e.preventDefault(); }, false);
 // Disables selection


操作功能表

按住不放 Windows Internet Explorer 中的某些元素會出現一個按住的提示影像,指示即將顯示操作功能表。如果提起手指,則會顯示操作功能表。如果以手指拖曳移開後,視覺影像會消失,而且不會顯示操作功能表。

如果想要使用自己的操作功能表,在 Internet Explorer 10 中也可以做到。只要在 contextmenu 事件呼叫 event.preventDefault,然後執行程式碼以顯示您的內容功能表即可。Internet Explorer 會自動將您的操作功能表與觸控功能搭配,並在按住不放時提供相同的提示視覺影像。下列範例使用 contextmenu 事件來偵測使用者何時按住不放和放開元素。當使用者提起手指時,會觸發 contextmenu 事件,然後顯示訊息。


<!DOCTYPE html>
<html >
<head>
     <title>Touch and hold example</title>
  <style>
   
    #touchspot {
      width:100px;
      height:100px;
      background-color:aquamarine;
      border:solid 2px black;
    }
  </style>

</head>
<body>
  <div id="touchspot">Touch and hold me</div>

  <script>
    var elm = document.getElementById("touchspot");

    elm.addEventListener("contextmenu", function (e) {
      e.target.innerHTML = "Touch has pressed, held, and lifted, or mouse has been right clicked. Time to show a custom menu.";
      e.preventDefault();    // Disables system menu
    }, false);

  </script>
</body>
</html>


如果您完全不想使用操作功能表 (例如,在需要使用者暫時按下手指一會兒的遊戲),您也可以停用預設操作功能表及提示視覺影像。若要這樣做,您只需要取消兩個事件。



 // Disables visual
element.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
// Disables menu
element.addEventListener("contextmenu", function(e) { e.preventDefault(); }, false);
 

手勢物件和事件

除了指標事件之外,Windows 8 還可以跨應用程式以一致的方式辨識稱為手勢 (像是捏合、撥動等等) 的複雜互動。

附註  Windows 7 不支援本節所述的 API。

先前範例中使用的 MSGesture 物件可讓您輕鬆啟用較高階手勢 (例如按住、取景位置調整及點選),而不需您自己擷取每個指標事件。捕捉 (Catch) 就是您需要擷取 onmspointerdown 事件,並使用目標 (手勢事件來源的物件) 來設定 MSGesture 物件以及 pointerId。若 MSGesture 物件未具現化和設定,您的元素只會觸發指標事件。

手勢事件比單純的指標事件納入更多資訊。例如,當使用者觸碰並立即將手指移開時會觸發 MSGestureTap 事件。如果使用者觸碰表面並將手指停留在該處時,會觸發 MSGestureHold 事件。

當使用者撥動手指時會觸發 MSGestureStartMSGestureChangeMSGestureEnd 事件。

如果使用者快速撥動然後提起手指,則會觸發 MSInertiaStart 事件。

附註  當手勢在「慣性」階段而且 MSGestureChange 事件的事件 detail 屬性等於 event.MSGESTURE_FLAG_INERTIA 時,您可進行偵測。

慣性是您不接觸螢幕之後繼續進行的動作。Internet Explorer 10 的手勢物件內建慣性支援,而且除了事件的處理常式以外,不需要任何其他程式碼。視撥動的速度而定,在觸發 MSGestureEnd 事件之前,MSInertiaStart 事件後面會跟著一系列的 MSGestureChange 事件。MSInertiaStart 事件只有在撥動速度足夠時才會觸發,而且該事件可以協助您的程式碼區分慢速移動和快速撥動。

以下是主要的手勢事件:

傳遞給每個事件的 MSGestureEvent 物件會傳回屬性,以協助您的應用程式判斷被操控的物件狀態。 若要查看使用者是否已嘗試縮放或調整元素的大小,請使用 scale 屬性。如果使用者旋轉螢幕上的元素,您可以使用 rotation 屬性取得以弧度表示的角度。這兩個屬性是從上次 MSGestureEvent 發生之後所做的變更。

手勢旗標

MSGesture 旗標會傳回事件物件的狀態,例如 MSGestureStartMSGestureChangeMSGestureHold。 包括:

  • MSGESTURE_FLAG_NONE (無特別狀態)。
  • MSGESTURE_FLAG_BEGIN (手勢事件開始的旗標)。
  • MSGESTURE_FLAG_END (手勢事件結束的旗標)。
  • MSGESTURE_FLAG_CANCEL (手勢事件取消的旗標)。
  • MSGESTURE_FLAG_INERTIA (電腦處於慣性階段時的旗標)。

例如,使用者在螢幕上撥動手指時,事件和詳細資料會像這樣回應:

  • MSGestureStart 事件會連同 MSGESTURE_FLAG_BEGIN 旗標一起觸發。
  • 當使用者移動手指時,MSGestureChange 事件會重複觸發並透過 Detail 屬性傳遞 MSGESTURE_FLAG_NONE。
  • 當使用者提起手指時,MSInertiaStart 事件會觸發,並傳遞 MSGESTURE_FLAG_INERTIA 旗標。
  • 只要元素仍在螢幕上移動,MSGestureChange 元素就會持續觸發並傳遞 MSGESTURE_FLAG_INERTIA 旗標。
  • 當動作即將結束時,MSGestureEnd 事件會觸發,而且使用 Detail 屬性傳遞兩個旗標 (MSGESTURE_FLAG_INERTIA 和 MSGESTURE_FLAG_END)。

如果使用者觸碰螢幕並按住幾秒,然後將手指移開,事件和詳細資料會像這樣:

  • 幾秒之後,MSGestureHold 事件會觸發,並傳遞 MSGESTURE_FLAG_BEGIN 旗標。
  • 當使用者開始將手指移開,MSGestureHold 事件會觸發,並傳遞 MSGESTURE_FLAG_END 和 MSGESTURE_FLAG_CANCEL 旗標。這會通知按住動作已被取消。
  • 當使用者移動手指時,MSGestureChange 事件會重複觸發並透過 Detail 屬性傳遞 MSGESTURE_FLAG_NONE。 從這裡開始,步驟像之前的順序一樣繼續進行。
  • 當使用者提起手指時,MSInertiaStart 事件會觸發,並傳遞 MSGESTURE_FLAG_INERTIA 旗標。
  • 只要元素仍在螢幕上移動,MSGestureChange 元素就會持續觸發並傳遞 MSGESTURE_FLAG_INERTIA 旗標。
  • 當動作即將結束時,MSGestureEnd 事件會觸發,而且使用 Detail 屬性傳遞兩個旗標 (MSGESTURE_FLAG_INERTIA 和 MSGESTURE_FLAG_END)。

如需示範進行中之手勢事件的完整範例應用程式,請參閱 MSGesture 參考主題。

相關主題

手勢事件
指標事件

 

 

顯示:
© 2015 Microsoft