タッチイベント対応のIE10、IE11用で、h5trackするときに画面スクロールしないようにする

[fukudayasuo]

IE10,11で、タッチでトラック操作を行うと画面がスクロールしてしまう。
FW側でスクロールしないように制御する。

具体的にはh5trackstart時に、preventDefaultされなかったらtouch-action:none(IE10なら-ms-touch-action:none)にする。
h5trackendの時に元に戻す。

元に戻すときの処理は、element.style.touchActionを覚えておき、h5tracnendの時に覚えていた値を代入する。

element.style.xxxにはそのエレメントに直接指定しているもの(≠computedStyle)が格納されているはずであり、クラスやスタイルで直接指定でない場合のスタイルの指定がある場合は、sytle.xxxは空文字のはずである。(クロスブラウザでこの挙動になるか確認する)

touchActionの無いブラウザ(undefined)なら何もしない。

[fukudayasuo]

SurfaceのIE11 で確認したところ、pointerdown時にその要素のtouch-action:noneに指定してもスクロールされてしまいました。

また、preventDefault(), stopPropagation(), stopImmediatePropagation()を呼んでもスクロールされてしまいます。

addEventListenerで、useCapture=trueにしてハンドラを追加しても同様でした。

element.onpointermoveにハンドラを記述しても同様でした。

pointerdown,mousedown,pointermove,mousemoveの各イベントで上記の対応を行って動作確認しましたが、それでもスクロールされてしまいました。

別の対応を考えます。

[simdy]

コントローラのイベントハンドラのバインド時に、h5trackstartの対象要素に対してtouch-actionに値(none)を設定するようにします。
（trackmove,endの対象には付加しない。これは、trackイベントは必ずstartイベントが初めに起きるようになっているため。また、startの対象要素と比べて、move,endはより広い範囲が対象になる場合がある（document等）ので、それらを対象にすると必要以上にtouch-actionを制限してしまうことになるため。）

より具体的には、h5.settings.trackTargetTouchAction 設定を追加し、この値をバインド時にセットします。
型は文字列で、デフォルトは「none」とします。

また、nullが指定されていた場合は、touch-actionには何も設定しないようにします。
この場合、trackstartが起きるようにtouch-actionを設定することはユーザーの責務とします。

[simdy]

参考用：
サイトをタッチ対応にする
http://msdn.microsoft.com/ja-jp/library/ie/jj583807(v=vs.85).aspx

ドラッグ アンド ドロップ タッチ サポート
http://msdn.microsoft.com/ja-jp/library/ie/dn265022(v=vs.85).aspx

[simdy]

h5.settings.trackTargetTouchAction

名前を以下に変更します。
h5.settings.trackstartTouchAction

[fukudayasuo]

207af21 d44d953 d44d953 57b40f8
touchActionの対応を行いました。

[simdy]

制限事項：
本対応により、コントローラをバインドするタイミングで『既に存在している』h5trackstartの対象要素については touch-action: none が設定されます。
しかし、逆に言うと、バインド後に追加された要素に対しては同スタイルは自動設定されません。

hifiveのコントローラ（のイベントハンドラ）の仕様では、'.trackable h5trackstart'のように書いた場合、.trackableの要素がコントローラのバインド後に追加された場合であってもハンドラとして動作します。ハンドラが動作する、ということについては変わりありませんが、後から追加された要素には（FWでは）touch-action:noneのスタイルが設定されないため、起点となるmousedown, touchstartなどのイベントが発生しない＝h5trackstartイベントが発生しないことになります。

このため、バインド後に追加される要素でh5track*イベントを使用したい場合は、ユーザー自身がtouch-action: noneのスタイルを設定する必要があります。
（.trackable { touch-action: none; }のように、CSSクラスとして設定しておく方法でも構いません。）