Javascript 進階手勢使用介紹_html5教學技巧

  在IE10中新加入的對高級用戶輸入的識別支持，舉例說明：註冊一個點擊操作，透過一句addEventListener 就能夠知道當前用戶的點擊是哪種設備，是手指的點擊，是滑鼠的單擊還是觸控筆的點擊（平板設備都會附有觸​​控筆）。

 canvas id="MyCanvas">="MyCanvas">>
    script>
>MSPointerDown", MyBack, false MyBack(e) {            alert(e.pointerType.toString());    > 🎜>script>
 以上這段程式碼就是能夠辨識出目前使用者的點擊是哪一種設備，透過回呼的方法中 e.pointerType 也進行判斷。滑鼠是4，觸控筆是3，手指是2。至於值為1是何種設備還有待研究。
還有要注意的就是 想在javascript中加入對輸入設備的識別，註冊的方法事件也是有點區別。

addEventListener 新增的事件為 MSPointerDown 而在IE10中對於這樣的多種裝置辨識中優先處理的手指的點擊，前提是不影響功能正常點擊的情況下。然而IE10不僅能辨識使用者的輸入裝置還支援非常多的進階手勢 以下為IE10高階手勢支援的示範

 

建立手勢物件

在您的網站中處理手勢的第一步是實例化手勢物件。

<span style="COLOR: blue">var<p> myGesture = <span style="COLOR: blue">new</span></p> MSGesture();</span>

接下來，為該手勢提供一個目標元素。瀏覽器將對該元素觸發手勢事件。同時，該元素還可以確定事件的座標空間。

elm = document.getElementById(<span style="COLOR: maroon">"someElement"</span>

);

<span style="COLOR: blue">var</span> myGesture = <span style="COLOR: blue">new</span> MSGesture();

elm.addEventListener(<span style="COLOR: maroon">"MSGestureChange"</span>

, handleGesture);

最後に、ジェスチャ認識中にどのポインタを処理するかをジェスチャ オブジェクトに伝えます。

elm.addEventListener(<span style="COLOR: maroon">"MSPointerDown"</span>, <span style="COLOR: blue">function</span> (evt) {

<span style="COLOR: rgb(0,100,0)">// adds the current mouse, pen, or touch contact for gesture recognition</span>

myGesture.addPointer(evt.pointerId);

});

注: 要素がデフォルトのタッチ操作 (パンやズームなど) を実行しないようにし、入力用のポインター イベントを提供するには、–ms-touch-action を使用して要素を構成する必要があることを忘れないでください。

ジェスチャイベントの処理

ジェスチャ オブジェクトに有効なターゲットが設定され、少なくとも 1 つのポインタが追加されると、ジェスチャ イベントの起動が開始されます。ジェスチャ イベントは、静的ジェスチャ (クリックまたはホールドなど) と動的ジェスチャ (ピンチ、回転、スワイプなど) の 2 つのタイプに分類できます。

クリック

最も基本的なジェスチャ認識はクリックです。クリックが検出されると、ジェスチャ オブジェクトのターゲット要素で MSGestureTap イベントが発生します。クリック イベントとは異なり、タップ ジェスチャは、ユーザーが移動せずにタッチ、マウス ボタンを押す、またはスタイラスでタッチした場合にのみトリガーできます。これは、ユーザーが要素をクリックしているか、ユーザーが要素をドラッグしているかを区別したい場合に便利です。

長押し

長押しジェスチャとは、ユーザーが 1 本の指で画面をタッチし、しばらく押したまま動かさずに指を持ち上げる操作を指します。長押し操作中に、ジェスチャのさまざまな状態に対して MSGestureHold イベントが複数回トリガーされます:

コードをコピー

コードは次のとおりです:

element.addEventListener("MSGestureHold", handleHold);
function handleHold(evt) {
if (evt.detail & evt.MSGESTURE_FLAG_BEGIN) {
// 開始はジェスチャの開始を示します。ホールド ジェスチャの場合、これはユーザーが指を離すと完全なプレス アンド ホールドになるまでその場に保持されていることを意味します。
}
if (evt.detail & evt.MSGESTURE_FLAG_END) {
// End はジェスチャの終了を示します。
}
if (evt.detail & evt.MSGESTURE_FLAG_CANCEL) {
//キャンセルは、ユーザーがジェスチャーを開始したがキャンセルしたことを示します。ホールドの場合、これはユーザーが持ち上げる前にドラッグしたときに発生し、ジェスチャー認識が完了したことを示します。
}
}

動的なジェスチャ (ピンチ、回転、スワイプ、ドラッグ)

動的なジェスチャ (ピンチや回転など) は、CSS 2D トランジションと同様に、トランジションとして報告されます。動的ジェスチャは、MSGestureStart、MSGestureChange (ジェスチャが続くと繰り返し発生します)、および MSGestureEnd の 3 つのイベントをトリガーできます。各イベントには、スケーリング (縮小)、回転、変形、速度に関する情報が含まれています。

動的なジェスチャはトランジションとして報告されるため、CSS 2D トランジションを含む MSGesture を使用して写真やパズルなどの要素を簡単に操作できます。たとえば、次の方法で要素の拡大縮小、回転、ドラッグを有効にできます。

コードをコピーします

コードは次のとおりです。 :

targetElement.addEventListener("MSGestureChange", manageElement);
function recruitElement(e) {
// 提供されている組み込み慣性を無効にする場合は、次のコードのコメントを解除します動的ジェスチャ認識による
// if (e.detail == e.MSGESTURE_FLAG_INERTIA)
// return;
var m = new MSCSSSMatrix(e.target.style.transform); // 最新情報を取得要素の CSS 変換
e.target.style.transform = m
.translate(e.offsetX, e.offsetY) // 変換の原点をジェスチャの中心の下に移動します
.rotate(e . 回転 * 180 / Math.PI) // 回転を適用
.scale(e.scale) // スケールを適用
.translate(e.translationX, e.translationY) // 移動を適用
.translate ( -e.offsetX, -e.offsetY); // 変換原点を後方に移動します
}

スケーリングや回転などの動的なジェスチャはマウス操作をサポートできます。回転によって実行 これは、マウス ホイールを使用しながら、CTRL または SHIFT 修飾キーをそれぞれ使用することによって実現されます。