JavaScript タッチ イベント (MSIE)

0 件のコメント

Internet Explorer 10 以上 で対応している タッチイベント。 "タッチイベント" と表記しましたが、IE では マウス、タッチ、および ペン を一元的に Pointer イベント として扱います。 ここでは IE の Pointer イベント についてまとめます。

ちなみに・・・IE10 は、Chrome 等 で対応している touch イベント に対応してないようです。。 そのイベント発生の取り回し方もやや違うようで、MSIE で 複数タッチ を利用する際は要注意です。 具体的な違いは、IE では touchmove 相当の MSPointerMove が タッチの数ずつ発生し、それらを実装側で観測(pointerid を利用して識別)しなければならない点です。

※ webkit の touch イベント については こちら

Pointer イベント 対応 有無 の 確認

ブラウザ が Pointer イベント が利用可能かどうか以下の JavaScriptコード で確認します。

1
2
3
if (window.navigator.msPointerEnabled) {
    // "Pointer" イベント が利用可能
}

デフォルト の タッチ動作 を 無効化

IE は デフォルト で パン、ピンチによるズーム、スワイプによる前/後ろページへ移動 等ができます。 ・・・できてしまう、が正しいんでしょうか? 他のブラウザではできないので、すべて無効化します。 無効化は以下の CSS 設定で可能です。

1
2
3
4
html, document, body
{
    -ms-touch-action: none;
}

イベントの種類

MSPointerDown
ポインタが押下された場合に発生します。mousedown、touchstart に相当。
MSPointerMove
ポインタが移動した場合に発生します。mousemove、touchmove に相当。
MSPointerUp
ポインタが離された場合に発生します。mouseup、touchend に相当。
MSPointerOver
ポインタがヒットテストエリア内に入った場合に発生します。mouseover に相当。
MSPointerOut
ポインタがヒットテストエリア内から出た場合に発生します。mouseout に相当。
MSPointerHover
ポインタが画面に接触することなく要素上へ来た場合に発生します。
MSPointerCancel
次のいずれかで発生します。touchcancel に相当。
(a) ハードウェアで認識可能なポインタ以上のタッチを検出した場合に発生します。
(b) ViewPort の変更中(ズーム、パン中)にタッチを検出した場合に発生します。

イベントオブジェクト

MSPointerEvent

メソッド

関数名 説明
getModifierState 指定した 修飾キー (ALT, CTRL 等) が 指定された状態 (true / false) かどうかを取得します
initEvent  
initMouseEvent  
initPointerEvent JavaScript で PointerEvent を生成するとき仕様使用します
initUIEvent  
preventDefault ブラウザ デフォルト の動作を実行しないことを指定します
stopImmediatePropagation これ以降、すべてのイベントを実行をしないことを指定します
stopPropagation イベントがバブルアップしないことを指定します

プロパティ

プロパティ名 説明
altKey boolean ALTキーの状態
AT_TARGET number 2
bubbles boolean 現在のイベントをバブルアップするかどうか
BUBBLING_PHASE number 3
button number ポインターデバイスのどのボタンが押されたか
buttons number ポインターデバイスのどのボタンが押されたかのビットマスク表現
cancelable boolean イベントがキャンセル可能かどうか
cancelBubble boolean 現在のイベントのバブルアップがキャンセルされたかどうか
CAPTURING_PHASE number 1
clientX number 水平座標
clientY number 垂直座標
ctrlKey boolean CTRLキーの状態
currentTarget DOMElement イベントが実行されている DOM要素
defaultPrevented boolean  
detail number  
eventPhase number 現在のイベントがイベント処理のうちどの段階か
fromElement DOMElement  
height number ポインターが画面に接触している大きさの高さ
hwTimestamp number イベントがレポートされたハードウェア時間(ミリ秒)
isPrimary boolean イベントに関連づけられているポインターが、現在のマウス、タッチ、またはペン操作の主要なポインタであるかどうか
isTrusted boolean  
layerX number 現在のレイヤー上における相対的な水平座標
layerY number 現在のレイヤー上における相対的な垂直座標
metaKey boolean メタキーの状態
MSPOINTER_TYPE_MOUSE number 4
MSPOINTER_TYPE_PEN number 3
MSPOINTER_TYPE_TOUCH number 2
offsetX number コンテナ上における相対的な水平座標
offsetY number コンテナ上における相対的な垂直座標
pageX number ページ上における水平座標
pageY number ページ上における垂直座標
pointerId number ポインタ(指)を特定する ID
pointerType number イベントソースがマウス、タッチ、またはペンのいずれであるかを示す
pressure number [0, 1] に正規化された圧力。ハードウェア依存。
relatedTarget DOMElement  
rotation number  
screenX number スクリーン上における水平座標
screenY number スクリーン上における垂直座標
shiftKey boolean SHIFTキーの状態
srcElement object イベントで実行される DOM要素
target object  
tiltX number Y-Z平面に対するペンの角度
tiltY number X-Z平面に対するペンの角度
timeStamp number イベントが発生した時間(ミリ秒)
toElement DOMElement  
type string イベントタイプ
view window イベントの生成元の view 要素
which number キーボードイベントで押下されたキーの Unicode 値
width number ポインターが画面に接触している大きさの横幅
x number 水平座標
y number 垂直座標

今回、以下のサイトを参考にしました。

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!