[Windows8 モダンUI] IEでのスワイプ操作実装でヒストリー（戻る/進む）との競合を防ぐ方法

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を指定します。