コメント:IE10での高度なユーザー入力の新たに追加された認識サポート、例を挙げてください:クリック操作を登録すると、現在のユーザーのクリックがどのデバイスであるか、指クリック、マウスクリック、スタイラスクリック(タブレットデバイスにはスタイラスがあります)
IE10高度なユーザー入力の認識サポートを新たに追加しました。たとえば、クリック操作を登録します。AddEventListener文を介して、現在のユーザーのクリック、指クリック、マウスクリック、またはスタイラスクリック(タブレットデバイスにはスタイラスがあります)がわかります。
上記のコードは、現在のユーザーのクリックがどのデバイスであるかを識別でき、コールバックメソッドE.PointerTypeを介して判断を下します。マウスは4、スタイラスは3、指は2です。
もう1つ注意すべきことは、JavaScriptに入力デバイスの識別を追加することであり、登録方法イベントも少し異なることです。
追加されたイベントはMSPOINTERDOWNです
IE10では、このようなさまざまなデバイスを認識して好まれる指のクリックは、通常の機能をクリックすることで影響を受けません。ただし、IE10はユーザーの入力デバイスを認識するだけでなく、多くの高度なジェスチャーもサポートしています。
以下は、IE10 Advanced Gesture Supportのデモンストレーションです
ジェスチャーオブジェクトを作成します
ウェブサイトでジェスチャーを処理する最初のステップは、ジェスチャーオブジェクトをインスタンス化することです。
var mygesture = new msgesture();
次に、ジェスチャーのターゲット要素を提供します。ブラウザは、この要素のジェスチャーイベントをトリガーします。同時に、この要素はイベントの座標空間を決定することもできます。
elm = document.getElementById(someElement);
mygesture.target = elm;
elm.addeventlistener(msgesturechange、handlegesture);
最後に、ジェスチャーの認識中に処理するポインターをジェスチャーオブジェクトに伝えます。
elm.addeventlistener(mspointerdown、function(evt){
//ジェスチャー認識のために現在のマウス、ペン、またはタッチコンタクトを追加します
mygesture.addpointer(evt.pointerid);
});
注:-MS-Touch-actionを使用する必要があることを忘れないでください。要素がデフォルトのタッチアクション(たとえば、PANやズーム)の実行を防ぎ、入力にポインターイベントを提供するのを防ぎます。
ジェスチャーイベントを処理しますジェスチャーオブジェクトに有効なターゲットがあり、少なくとも1つのポインターが追加されると、ジェスチャーイベントのトリガーが開始されます。ジェスチャーイベントは、静的ジェスチャー(クリックまたはホールドなど)と動的なジェスチャー(たとえば、縮小、回転、スワイプ)の2つのタイプに分けることができます。
クリック最も基本的なジェスチャー認識はクリックです。クリックが検出されると、Gestureオブジェクトのターゲット要素でMSGESTURETAPイベントがトリガーされます。クリックイベントとは異なり、クリックジェスチャーは、ユーザーがタッチしたり、マウスボタンを押したりするときにのみトリガーできます。または、動いずにスタイラスを使用してタッチします。これは通常、ユーザーのクリックとドラッグ要素を区別したい場合に非常に便利です。
ロングプレス長いプレスジェスチャーとは、ユーザーが1本の指で画面に触れて、しばらく保持し、動かずに持ち上げることを指します。長い報道の相互作用の間、MSGESTUREホールドイベントは、ジェスチャーのさまざまな状態で複数回解雇されます。
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"、ManipulateElement);
関数ManipulateElement(e){
//動的ジェスチャー認識によって提供される組み込みの慣性を無効にしたい場合は、次のコードを解除します
// if(e.detail == e.msgesture_flag_inertia)
// 戻る;
var m = new MscsSmatrix(e.target.style.transform); //要素上の最新のCSS変換を取得します
e.target.style.transform = m
.translate(e.offsetx、e.offsety)//変換起点をジェスチャーの中心の下に移動します
.rotate(e.rotation * 180 / math.pi)//回転を適用します
.Scale(E.Scale)//スケールを適用します
.translate(E.TranslationX、E.Translationy)//翻訳を適用します
.translate(-e.offsetx、-e.offsety); //変換の原点を戻します
}
ズームや回転などの動的なジェスチャーは、マウスの動作をサポートできます。これは、マウスホイールを回転させながらCTRLまたはシフト修飾子をそれぞれ使用することで実現できます。