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

タッチイベントとマウスイベントの両方を拾うマシン、ブラウザについて、マウス操作時にh5trackイベントが発火しない #298

Closed
fukudayasuo opened this Issue Apr 24, 2014 · 7 comments

Comments

Projects
None yet
2 participants
@fukudayasuo

コントローラの実装が、タッチイベントがあるならタッチイベントでh5trackを発火しマウスイベントは無視しているためである。

タッチイベントがあるブラウザについて、マウス操作時にはタッチイベントが発火しない場合にh5trackイベントがマウス操作時に発火しない。

以下、ブラウザ毎の挙動をまとめた。

IE11
touchイベントは無い。
タッチ時:pointerdown、mousedownが起きる。h5trackstartが発火する。
マウス時:pointerdown、mousedownが起きる。h5trackstartが発火する。タッチ時と同じ。

chrome34
touchイベントあり。
タッチ時:touchstartが起きる。h5trackstartが発火する。
マウス時:mousedownが起きる。h5trackstartは発火しない。

Firefox29,30β
touchイベントは無い
タッチ時:mousedownが起きる。h5trackstartが発火する。
マウス時:mousedownが起きる。h5trackstartが発火する。タッチ時と同じ。

opera20
touchイベントあり。
タッチ時:touchstartが起きる。h5trackstartが発火する。
マウス時:mousedownが起きる。h5trackstartは発火しない。

ChromeとOperaだとマウス操作時にh5trackイベントが発火しなかった。

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

fukudayasuo
#298 タッチもマウスもあるブラウザでマウス操作時にh5trackイベントが発火しない問題を修正しました。
h5trackstartをmousestartにバインド、タッチがあるならtouchstartにもバインドしています。

move,endは、h5trackstart時にバインドしているのは修正前と変わりませんが、
touchmove,mousemoveのどちらにバインドするか(endも同様)は、h5trackstartがmouseで発火したものかtouchで発火したものかどうかを見て、mousemoveなのかtouchmoveなのかを判定するようにしました。
(修正前は、タッチのあるブラウザならtouchmoveにバインドしていました)
@fukudayasuo

This comment has been minimized.

Show comment
Hide comment
@fukudayasuo

fukudayasuo Apr 24, 2014

テストケースも修正します。
今までは、タッチのあるデバイスはタッチのみ、タッチのないデバイスはマウスイベントのみでテストを行っていました。
これを、タッチのあるデバイスはタッチのテスト、マウスのあるデバイスはマウスのテスト(両方ある場合は両方)でテストを行うようにします。

iOS、androidにはマウスもタッチもイベントがあるので、両方のテストが行われるようになります。

テストケースも修正します。
今までは、タッチのあるデバイスはタッチのみ、タッチのないデバイスはマウスイベントのみでテストを行っていました。
これを、タッチのあるデバイスはタッチのテスト、マウスのあるデバイスはマウスのテスト(両方ある場合は両方)でテストを行うようにします。

iOS、androidにはマウスもタッチもイベントがあるので、両方のテストが行われるようになります。

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

fukudayasuo
#298 タッチイベントとマウスイベントの両方あるブラウザは両方でh5trackのテストを行うようにしました。
h5trackのテストをmoduleに切り、そのテストは以下のように実装しています。
・マウス版、タッチ版のテスト関数を返す関数をテストの数だけ作成(テスト内容自体は今までと同じ)
・h5trackのテストは、↑の関数を使ってマウス版、タッチ版それぞれのテストを用意
・ブラウザにタッチイベントが無い場合はタッチのテストはabortTest()する。

@simdy simdy added the bug label Apr 30, 2014

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

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

fukudayasuo
#298 chrome,operaで、マウスでh5trackイベントが正しく動作しない問題を修正しました。
h5trackmove/endのバインド先が、hasTouchEventならターゲット、そうでないならdocumentとしていたことが原因でした。
h5trackstartがマウスイベントで起きた(isTouch===true)場合はh5trackmove/endはdocumentにバインドするように修正しました。

また、h5track*をトリガするかどうかの判定式も、hasTouchEventでなくisTouchで判定するように修正しました。
@fukudayasuo

This comment has been minimized.

Show comment
Hide comment
@fukudayasuo

fukudayasuo May 7, 2014

タッチパネルのあるPCのFirefoxでの挙動について

Firefoxでは、指でのタッチ操作を行ったときに、mousedownイベントが発生しない場合があります。その場合、FWがh5trackstartイベントを発火させることができません。

Firefox29及び30βで検証を行い、以下の挙動を確認しました。

  • スクロールされる要素の内側にある要素で、スクロールされる方向に動かすようにタッチした場合に、mousedownが発火せず、pointerdown、touchstartも発火しません。
  • そのままその指でトラックしてスクロールすると、DOMMouseScrollイベントが発火して、スクロールされます。
  • その後に指を離しても、mouseup,pointerup,touchend等のイベントは発火しませんでした。

例えば、縦に長いページで、bodyにy軸方向にスクロールバーが出ており、その中にmousedownイベントを拾っている要素があるとすると、その要素に対して以下のような挙動をします。

  • タッチして横(x軸方向)に動かした場合はmousemove,mousedown,mousemove,,, とイベントが発生します
  • タッチして縦(y軸方向)に動かした場合はDOMMouseScrollイベントが発生し、mouseXXXイベントは発生しません。

なお、Firefoxはv18でtouchXXXイベントをサポートしていましたが、v24で削除され、現在のv29でもtouchXXXイベントは起きません。

なお、タッチペンやマウスでの操作には問題ありませんでした。

対策としては、イベントをバインドしている要素の親要素全てについて、以下のようにoverflow:hiddenを設定すると、スクロールは発生せず、mouseXXXイベントが発生します。(hifiveはh5trackXXXイベントをあげることができます。)

$('.track-target').parents().css('overflow', 'hidden');

タッチパネルのあるPCのFirefoxでの挙動について

Firefoxでは、指でのタッチ操作を行ったときに、mousedownイベントが発生しない場合があります。その場合、FWがh5trackstartイベントを発火させることができません。

Firefox29及び30βで検証を行い、以下の挙動を確認しました。

  • スクロールされる要素の内側にある要素で、スクロールされる方向に動かすようにタッチした場合に、mousedownが発火せず、pointerdown、touchstartも発火しません。
  • そのままその指でトラックしてスクロールすると、DOMMouseScrollイベントが発火して、スクロールされます。
  • その後に指を離しても、mouseup,pointerup,touchend等のイベントは発火しませんでした。

例えば、縦に長いページで、bodyにy軸方向にスクロールバーが出ており、その中にmousedownイベントを拾っている要素があるとすると、その要素に対して以下のような挙動をします。

  • タッチして横(x軸方向)に動かした場合はmousemove,mousedown,mousemove,,, とイベントが発生します
  • タッチして縦(y軸方向)に動かした場合はDOMMouseScrollイベントが発生し、mouseXXXイベントは発生しません。

なお、Firefoxはv18でtouchXXXイベントをサポートしていましたが、v24で削除され、現在のv29でもtouchXXXイベントは起きません。

なお、タッチペンやマウスでの操作には問題ありませんでした。

対策としては、イベントをバインドしている要素の親要素全てについて、以下のようにoverflow:hiddenを設定すると、スクロールは発生せず、mouseXXXイベントが発生します。(hifiveはh5trackXXXイベントをあげることができます。)

$('.track-target').parents().css('overflow', 'hidden');
@simdy

This comment has been minimized.

Show comment
Hide comment
@simdy

simdy May 9, 2014

Member

現時点では、Firefoxの挙動については制限事項とします。
Firefox29ではtouch-actionが実験的に実装されているので(デフォルトでは無効)
これがデフォルトで有効になり、意図した動作を実現できるようになった場合に改めて対応を検討します。

Member

simdy commented May 9, 2014

現時点では、Firefoxの挙動については制限事項とします。
Firefox29ではtouch-actionが実験的に実装されているので(デフォルトでは無効)
これがデフォルトで有効になり、意図した動作を実現できるようになった場合に改めて対応を検討します。

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

fukudayasuo
#298
h5trackstartバインド時に、ターゲットのstyle.touchActionにh5.settingsrack.startTouchAction(default:'none')を設定するようにしました。
@fukudayasuo

This comment has been minimized.

Show comment
Hide comment
@fukudayasuo

fukudayasuo May 9, 2014

touch-action (または -ms-touch-action )に対応しているブラウザについて、コントローラがh5trackstartイベントをバインドする時に、 touch-action:none のスタイルをFWが設定するようにしました。

touch-action に設定する値は 'none' がデフォルトであり、変更したい場合は h5.settingsrack.startTouchAction に他の値を設定してください( 'pan-x' , auto など)。

null を設定すると、FWは touch-action のスタイルを変更することはありません。

touch-action (または -ms-touch-action )に対応しているブラウザについて、コントローラがh5trackstartイベントをバインドする時に、 touch-action:none のスタイルをFWが設定するようにしました。

touch-action に設定する値は 'none' がデフォルトであり、変更したい場合は h5.settingsrack.startTouchAction に他の値を設定してください( 'pan-x' , auto など)。

null を設定すると、FWは touch-action のスタイルを変更することはありません。

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

@simdy

This comment has been minimized.

Show comment
Hide comment
@simdy

simdy May 9, 2014

Member

@fukudayasuo
settingsのプロパティ名が間違っています。コミットコメント側でも間違っています。
コードでtypoがないか確認してください。

Member

simdy commented May 9, 2014

@fukudayasuo
settingsのプロパティ名が間違っています。コミットコメント側でも間違っています。
コードでtypoがないか確認してください。

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

fukudayasuo
#298 h5trackstartイベントのバインド対象要素が複数ある場合に正しく動いていなかったので修正。
また、touchActionをサポートしているかどうかとサポートしているときのtouchActionのプロパティを、バインド毎ではなく最初に一回だけ判定するようにしました。
また、グローバルセレクタを指定された時、touchActionを指定する要素を同一documentから探すように修正しました。
@fukudayasuo

This comment has been minimized.

Show comment
Hide comment
@fukudayasuo

fukudayasuo May 9, 2014

コミットコメント及び、issueコメントが間違えていました。
正しくは、h5.settings.trackstartTouchAction です。
ソースコードは間違っていませんでした。

コミットコメント及び、issueコメントが間違えていました。
正しくは、h5.settings.trackstartTouchAction です。
ソースコードは間違っていませんでした。

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

fukudayasuo
#298 touch-actionが設定されていることを確認するテストを追加しました。
(touch-action(または-ms-touch-action)プロパティのないブラウザではテストは実行されません。)

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

fukudayasuo
#298 isSupportTouchAction -> isSupportedTouchAction に変更。
判定を即時間数で行うように変更。

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

@simdy simdy closed this May 12, 2014

@fukudayasuo

This comment has been minimized.

Show comment
Hide comment
@fukudayasuo

fukudayasuo Oct 19, 2015

現在時点(2015年10月)で、タッチ対応PC端末における各ブラウザのtouch, mouse, pointerの各イベントについて再度挙動を確認しました。

マウス操作、タッチ操作、デジタライザペンでの操作、の各操作でどのイベントが起きるかを検証しました。

IE 11

タッチ マウス デジタイザペン
mousedown
pointerdown
touchstart × × ×

Edge 12

タッチ マウス デジタイザペン
mousedown
pointerdown
touchstart × × ×

Chrome 40

タッチ マウス デジタイザペン
mousedown ×
pointerdown × × ×
touchstart × ×

Firefox 40

タッチ マウス デジタイザペン
mousedown
pointerdown × × ×
touchstart × × ×

Opera 32.0

タッチ マウス デジタイザペン
mousedown ×
pointerdown × × ×
touchstart × ×

デジタイザペン使用時の結果はいずれのブラウザもマウスと同じでした。

現在時点(2015年10月)で、タッチ対応PC端末における各ブラウザのtouch, mouse, pointerの各イベントについて再度挙動を確認しました。

マウス操作、タッチ操作、デジタライザペンでの操作、の各操作でどのイベントが起きるかを検証しました。

IE 11

タッチ マウス デジタイザペン
mousedown
pointerdown
touchstart × × ×

Edge 12

タッチ マウス デジタイザペン
mousedown
pointerdown
touchstart × × ×

Chrome 40

タッチ マウス デジタイザペン
mousedown ×
pointerdown × × ×
touchstart × ×

Firefox 40

タッチ マウス デジタイザペン
mousedown
pointerdown × × ×
touchstart × × ×

Opera 32.0

タッチ マウス デジタイザペン
mousedown ×
pointerdown × × ×
touchstart × ×

デジタイザペン使用時の結果はいずれのブラウザもマウスと同じでした。

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