この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Windwos8のモダンUIモードでは左右のスワイプがヒストリー（戻る/進む）として割り当てられる
スワイプ等の操作をWindows8のモダンUIモードでのIEで行わせる場合は注意が必要です。
モダンUIモードでのIEは左右のスワイプの挙動が履歴の前後の移動として割り当てられているため、操作が競合してしまいます。
例えば下記のような操作をユーザーに行わせようとすると、対象のオブジェクトの移動（送り）が行われずヒストリーの前後移動が行われてしまいます。
- スライドを次々にスワイプで送って閲覧する
- 複数のサムネイルを横並びに配置して横スライドバーを表示する代わりにスワイプして送る
既に上記のような機能を実装しているサイトなどではモダンUI用に対応が必要になります。
解決策
IE10用のタッチに関するCSS プロパティ（-ms-touch-action）が用意されていますので、これを対象のエリアやオブジェクトに付加することで競合を避けてフリック等の操作を行うことが可能になります。
preventDefaultは効かないことを確認しています。
-ms-touch-action CSS プロパティ
| 値 | 説明 |
|---|---|
| auto | 初期値。ブラウザーで、要素の動作が決定されます。 |
| none | この要素を指定すると、既定のタッチ動作は許可されません。 |
| pan-x | この要素を指定すると、タッチ操作による水平軸方向のパンが可能になります。 |
| pan-y | この要素を指定すると、タッチ操作による垂直軸方向のパンが可能になります。 |
| pinch-zoom | この要素を指定すると、ピンチによるズームが可能になります。 |
| manipulation | この要素を指定すると、タッチ操作によるパンとピンチによるズームが可能になります ("pan-x pan-y pinch-zoom" の短縮形)。 |
| double-tap-zoom | この要素を指定すると、ダブルタップによるズームが可能になります。 |
| inherit | この要素を指定すると、親から -ms-touch-action の値を継承します。 |
※noneを指定しない限りは明示的にズーム系の値を指定しなくてもパンやピンチによるズームは効くようです。
記入例
box01 { -ms-touch-action: double-tap-zoom; }canvasに指先で自由に絵を描くための機能を作りたい場合などにはmanipulationを指定します。
16
