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

fukudayasuo commented 10 years ago

コントローラの実装が、タッチイベントがあるならタッチイベントで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 commented 10 years ago

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

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

fukudayasuo commented 10 years ago

タッチパネルのある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 commented 10 years ago

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

fukudayasuo commented 10 years ago

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

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

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

simdy commented 10 years ago

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

fukudayasuo commented 10 years ago

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

fukudayasuo commented 8 years ago

現在時点(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	○	×	×

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

hifive / hifivemain