Javascript 進階手勢使用介紹_html5教學技巧-H5教程-PHP中文網

在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高階手勢支援的示範

建立手勢物件

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

var myGesture = new MSGesture();

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

elm = document.getElementById("someElement"

);

var myGesture = new MSGesture();

elm.addEventListener("MSGestureChange"

, handleGesture);

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

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

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 修飾キーをそれぞれ使用することによって実現されます。