一部のライブラリをタッチデバイスで動作させようとしていますが、それらがどのようにサポートされ、どのように動作するかを理解するのに苦労しています。
基本的に5つのタッチイベントがありますが、モバイルブラウザ間ではtouchstart
イベントについてのみコンセンサスがあるようです(duh)。テストケースとしてフィドルを作成しました。
Android4を搭載したGalaxyNoteでこれをテストしましたが、デスクトップブラウザでもリンクを確認できます。
目標は、タップ、ダブルタップ、およびロングタップの処理方法を理解することです。特別なことは何もありません。
基本的に、これは何が起こるかです:
Androidの株式ブラウザはタッチイベントを発生しません。それはちょうどタップ、焼成してエミュレートマウスクリックにしようmousedown
、mouseup
とclick
連続したイベントが、ダブルタップはちょうどthaのページズームイン、ズームアウト。
Chrome for Androidは、指が画面に触れるとタッチスタートイベントを発生させます。それはすぐに十分なリリースだ場合、それはその後、発火mousedown
、mouseup
、touchend
そして最後click
のイベント。
ロングタップの場合、約0.5秒後に発火mousedown
しmouseup
、touchend
指を離すとclick
最後にイベントは発生しません。
指を動かすと、touchmove
イベントが数回発生し、その後touchcancel
イベントが発生します。その後は何も発生せずtouchend
、指を離してもイベントは発生しません。
ダブルタップ/アウトズーム機能のトリガーが、イベントごと、それはコンボ発動touchstart
-touchevent
二度は無いマウスイベントでは、解雇しました。
FirefoxのAndroid用は正しく発火touchstart
イベントを、短いタップ火災の場合はmousedown
、mouseup
、touchend
およびclick
その後。
ロングタップの場合、発砲しmousedown
、mouseup
最後にtouchend
イベント。これらについてはChromeと同じです。
しかし、あなたがあれば、あなたの指を動かす火災があれば、touchmove
継続的に(1が期待することとして)それはdoesnのない火touchleave
指がイベントリスナーを持つ要素を離れたときにイベントをし、発生しませんtouchcancel
指は、ブラウザのビューポートから外れたときに、イベントを。
以下のためにダブルタップ、それだけでクロームのように振る舞います。
Opera MobileはChromeとFirefoxと同じことを短いタップで実行しますが、長押しすると、本当に無効にしたいある種の共有機能がアクティブになります。指を動かしたり、ダブルタップしたりすると、Firefoxと同じように動作します。
Chromeベータ版は通常の短いタップで動作しますが、長いタップの場合はmouseup
イベントを発生しなくなります。ちょうどtouchstart
、mousedown
0.5秒後touchend
、指を離したときです。指を動かすと、FirefoxやOperaMobileのように動作するようになりました。
ダブルタップの場合、ズームアウト時にタッチイベントは発生しませんが、ズームインした場合にのみ発生します。
Chromeベータ版は最も奇妙な動作を示しますが、ベータ版なので文句は言えません。
問題は、タッチデバイスの最も一般的なブラウザでショートタップ、ロングタップ、ダブルタップを検出しようとする簡単で方法はありますか?
残念ながら、Safariを搭載したiOSデバイス、またはWindows Phone 7 / Phone 8 / RT用のIEでテストすることはできませんが、テストできる方がいらっしゃいましたら、フィードバックをいただければ幸いです。