-
Notifications
You must be signed in to change notification settings - Fork 10
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
Comments
h5trackstartをmousestartにバインド、タッチがあるならtouchstartにもバインドしています。 move,endは、h5trackstart時にバインドしているのは修正前と変わりませんが、 touchmove,mousemoveのどちらにバインドするか(endも同様)は、h5trackstartがmouseで発火したものかtouchで発火したものかどうかを見て、mousemoveなのかtouchmoveなのかを判定するようにしました。 (修正前は、タッチのあるブラウザならtouchmoveにバインドしていました)
テストケースも修正します。 iOS、androidにはマウスもタッチもイベントがあるので、両方のテストが行われるようになります。 |
h5trackのテストをmoduleに切り、そのテストは以下のように実装しています。 ・マウス版、タッチ版のテスト関数を返す関数をテストの数だけ作成(テスト内容自体は今までと同じ) ・h5trackのテストは、↑の関数を使ってマウス版、タッチ版それぞれのテストを用意 ・ブラウザにタッチイベントが無い場合はタッチのテストはabortTest()する。
h5trackmove/endのバインド先が、hasTouchEventならターゲット、そうでないならdocumentとしていたことが原因でした。 h5trackstartがマウスイベントで起きた(isTouch===true)場合はh5trackmove/endはdocumentにバインドするように修正しました。 また、h5track*をトリガするかどうかの判定式も、hasTouchEventでなくisTouchで判定するように修正しました。
タッチパネルのあるPCのFirefoxでの挙動についてFirefoxでは、指でのタッチ操作を行ったときに、mousedownイベントが発生しない場合があります。その場合、FWがh5trackstartイベントを発火させることができません。 Firefox29及び30βで検証を行い、以下の挙動を確認しました。
例えば、縦に長いページで、bodyにy軸方向にスクロールバーが出ており、その中にmousedownイベントを拾っている要素があるとすると、その要素に対して以下のような挙動をします。
なお、Firefoxはv18でtouchXXXイベントをサポートしていましたが、v24で削除され、現在のv29でもtouchXXXイベントは起きません。 なお、タッチペンやマウスでの操作には問題ありませんでした。 対策としては、イベントをバインドしている要素の親要素全てについて、以下のようにoverflow:hiddenを設定すると、スクロールは発生せず、mouseXXXイベントが発生します。(hifiveはh5trackXXXイベントをあげることができます。)
|
現時点では、Firefoxの挙動については制限事項とします。 |
h5trackstartバインド時に、ターゲットのstyle.touchActionにh5.settingsrack.startTouchAction(default:'none')を設定するようにしました。
|
@fukudayasuo |
また、touchActionをサポートしているかどうかとサポートしているときのtouchActionのプロパティを、バインド毎ではなく最初に一回だけ判定するようにしました。 また、グローバルセレクタを指定された時、touchActionを指定する要素を同一documentから探すように修正しました。
コミットコメント及び、issueコメントが間違えていました。 |
(touch-action(または-ms-touch-action)プロパティのないブラウザではテストは実行されません。)
判定を即時間数で行うように変更。
現在時点(2015年10月)で、タッチ対応PC端末における各ブラウザのtouch, mouse, pointerの各イベントについて再度挙動を確認しました。 マウス操作、タッチ操作、デジタライザペンでの操作、の各操作でどのイベントが起きるかを検証しました。 IE 11
Edge 12
Chrome 40
Firefox 40
Opera 32.0
デジタイザペン使用時の結果はいずれのブラウザもマウスと同じでした。 |
コントローラの実装が、タッチイベントがあるならタッチイベントで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イベントが発火しなかった。
The text was updated successfully, but these errors were encountered: