Skip to content
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
Assignees
Labels
Milestone

Comments

@fukudayasuo
Copy link

@fukudayasuo fukudayasuo commented Apr 25, 2014

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
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
Copy link
Author

@fukudayasuo fukudayasuo commented Apr 28, 2014

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
Copy link
Member

@simdy 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
Copy link
Member

@simdy 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
Copy link
Member

@simdy 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
(bindByBindObject内で、touch-actionの設定を行うように変更します。)
@fukudayasuo
Copy link
Author

@fukudayasuo fukudayasuo commented May 9, 2014

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

fukudayasuo pushed a commit to hifive-labs/hifivemain that referenced this issue May 12, 2014
move -> moveEventType
end -> endEventType
@simdy
Copy link
Member

@simdy 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.