Closed fukudayasuo closed 10 years ago
fukudayasuo
commented
10 years ago SurfaceのIE11 で確認したところ、pointerdown時にその要素のtouch-action:noneに指定してもスクロールされてしまいました。
また、preventDefault(), stopPropagation(), stopImmediatePropagation()を呼んでもスクロールされてしまいます。
addEventListenerで、useCapture=trueにしてハンドラを追加しても同様でした。
element.onpointermoveにハンドラを記述しても同様でした。
pointerdown,mousedown,pointermove,mousemoveの各イベントで上記の対応を行って動作確認しましたが、それでもスクロールされてしまいました。
別の対応を考えます。
simdy
commented
10 years ago コントローラのイベントハンドラのバインド時に、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
commented
10 years ago 参考用： サイトをタッチ対応にする 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
commented
10 years ago h5.settings.trackTargetTouchAction
名前を以下に変更します。 h5.settings.trackstartTouchAction
fukudayasuo
commented
10 years ago 207af2104789395e734e672788338943d0c0e8b2 d44d95301ed8fe654252aee7b8dbdcff5e0a9126 d44d95301ed8fe654252aee7b8dbdcff5e0a9126 57b40f81a655e2ff722d85127fba8434e7434293 touchActionの対応を行いました。
simdy
commented
10 years ago 制限事項： 本対応により、コントローラをバインドするタイミングで『既に存在している』h5trackstartの対象要素については touch-action: none が設定されます。 しかし、逆に言うと、バインド後に追加された要素に対しては同スタイルは自動設定されません。
hifiveのコントローラ（のイベントハンドラ）の仕様では、'.trackable h5trackstart'のように書いた場合、.trackableの要素がコントローラのバインド後に追加された場合であってもハンドラとして動作します。ハンドラが動作する、ということについては変わりありませんが、後から追加された要素には（FWでは）touch-action:noneのスタイルが設定されないため、起点となるmousedown, touchstartなどのイベントが発生しない＝h5trackstartイベントが発生しないことになります。
このため、バインド後に追加される要素でh5track*イベントを使用したい場合は、ユーザー自身がtouch-action: noneのスタイルを設定する必要があります。
（.trackable { touch-action: none; }のように、CSSクラスとして設定しておく方法でも構いません。）
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)なら何もしない。