Internet Explorer 10 以上 で対応している タッチイベント。
"タッチイベント" と表記しましたが、IE では マウス、タッチ、および ペン を一元的に Pointer イベント として扱います。
ここでは IE の Pointer イベント についてまとめます。
ちなみに･･･IE10 は、Chrome 等 で対応している touch イベント に対応してないようです。。
そのイベント発生の取り回し方もやや違うようで、MSIE で 複数タッチ を利用する際は要注意です。
具体的な違いは、IE では touchmove 相当の MSPointerMove が タッチの数ずつ発生し、それらを実装側で観測（pointerid を利用して識別）しなければならない点です。
※ webkit の touch イベント については こちら。
Pointer イベント 対応 有無 の 確認
ブラウザ が Pointer イベント が利用可能かどうか以下の JavaScriptコード で確認します。
if (window.navigator.msPointerEnabled) {
// "Pointer" イベント が利用可能
}
デフォルト の タッチ動作 を 無効化
IE は デフォルト で パン、ピンチによるズーム、スワイプによる前/後ろページへ移動 等ができます。 ･･･できてしまう、が正しいんでしょうか？ 他のブラウザではできないので、すべて無効化します。 無効化は以下の CSS 設定で可能です。
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 | 垂直座標 |
今回、以下のサイトを参考にしました。
- IEBlog - IE 10 および Metro スタイル アプリケーションでのタッチ入力
- IEBlog - タッチ操作向けサイト構築のガイドライン
- MSDN - ポインター イベントとジェスチャ イベント
- MSDN - MSPointerEvent object
- MSDN - event
- MSDN - getModifierState method
- MSDN - MSPointerCancel | onmspointercancel event
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！