New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
fukudayasuo opened this Issue Apr 25, 2014 · 6 comments

Comments

Projects
None yet
2 participants
@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 pushed a commit to hifive-labs/hifivemain that referenced this issue Apr 28, 2014

fukudayasuo
#299
h5trackstart時にイベントターゲットに対してtouch-action(IE10なら-ms-touch-action)にnoneを設定するようにしました。(IE10,11用)

h5trackstart時に要素に直接touch-actionが指定されていた場合その値を覚えておき、h5track中はnoneにして、h5trackend時に覚えておいた値に戻しています。

もともと要素に直接指定されてい値(≠computedStyle)は、element.style.touchAction(msTouchAction)で取得できることを確認しました。
(要素に直接は指定されていなくてcssファイルやstyleタグで指定されている場合はelement.styleは空文字なので、h5trackend時には空文字に戻り、cssやstyleタグで指定したスタイルになります。)

fukudayasuo pushed a commit to hifive-labs/hifivemain that referenced this issue Apr 28, 2014

@fukudayasuo

This comment has been minimized.

Show comment
Hide comment
@fukudayasuo

fukudayasuo Apr 28, 2014

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

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

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

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

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

別の対応を考えます。

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

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

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

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

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

別の対応を考えます。

@simdy simdy added the bug label Apr 30, 2014

@simdy simdy added this to the v1.1.10 milestone Apr 30, 2014

@simdy

This comment has been minimized.

Show comment
Hide comment
@simdy

simdy May 9, 2014

Member

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

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

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

Member

simdy commented May 9, 2014

コントローラのイベントハンドラのバインド時に、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

This comment has been minimized.

Show comment
Hide comment
@simdy

simdy May 9, 2014

Member

参考用:
サイトをタッチ対応にする
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

Member

simdy commented May 9, 2014

参考用:
サイトをタッチ対応にする
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

This comment has been minimized.

Show comment
Hide comment
@simdy

simdy May 9, 2014

Member

h5.settings.trackTargetTouchAction

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

Member

simdy commented May 9, 2014

h5.settings.trackTargetTouchAction

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

@simdy simdy added enhancement and removed bug labels May 9, 2014

fukudayasuo pushed a commit to hifive-labs/hifivemain that referenced this issue May 9, 2014

fukudayasuo
#299 getBindObjectsでのtouch-actionの設定をやめました。
(bindByBindObject内で、touch-actionの設定を行うように変更します。)
@fukudayasuo

This comment has been minimized.

Show comment
Hide comment
@fukudayasuo

fukudayasuo May 9, 2014

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

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

fukudayasuo pushed a commit to hifive-labs/hifivemain that referenced this issue May 12, 2014

fukudayasuo
#299 変数名を変更しました
move -> moveEventType
end -> endEventType
@simdy

This comment has been minimized.

Show comment
Hide comment
@simdy

simdy May 12, 2014

Member

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

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

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

Member

simdy commented May 12, 2014

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

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

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

@simdy simdy closed this May 12, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment