IE11では、iOSやAndroidとは違う方法でマルチタッチに対応している。マウス、タッチ、デジタイザペンをまとめたポインタイベントが用意されている。
マウスイベントのmoousedown、mouseup、mousemove、mouseleaveに対応するpointerdown、pointerup、pointermove、pointerleaveが用意されている。
これらのイベントはPointerEventオブジェクトを受け取る。
PointerEventオブジェクトはMouseEventオブジェクトを継承している。
pointerTypeプロパティでマウス、タッチ、デジタイザペンを区別して、pointerIdプロパティでマルチタッチの複数タッチを区別することができる。
詳しくは、ここでw
まず、ポインターイベントに対応しているかどうかは、
if (!window.PointerEvent) {
alert("ポインターイベントに対応してない");
return;
}
で判定する。
IEのタッチ操作での規定の操作を無効にするためにCSSに
touch-action:none;
を追加する。
あと、コンテキストメニューや長押しで出るマークを出なくする。
// コンテキストメニューを無効にする
$("#canvas").on("contextmenu",(e) => {
e.preventDefault();
});
// 指長押しで出るマークを無効にする
$("#canvas").on("MSHoldVisual",(e) => {
e.preventDefault();
});
あとは、マウスイベントと同じようにハンドラを登録して、PointerEventオブジェクトで入力デバイス判定して処理すればOK。
押してるところに○を表示するプログラムソースをアップしておく。
iOSやAndorid、IE10に対応したのもアップしておく。
コメント