ライブラリの一部をタッチデバイスで動作させようとしていますが、どのようにサポートされているか、どのように動作するかを理解するのに苦労しています。
基本的に、 5タッチイベント がありますが、touchstart
イベント(duh)についてのみモバイルブラウザ間でコンセンサスがあるようです。テストケースとして fiddle を作成しました。
Android 4を搭載したGalaxy Noteでこれをテストしましたが、デスクトップブラウザーでもリンクを確認できます。
目標は、タップ、ダブルタップ、ロングタップの処理方法を理解することです。派手なものは何もありません。
基本的に、これは何が起こるかです:
Androidストックブラウザはタッチイベントを起動しません。タップでマウスクリックをエミュレートし、mousedown
、mouseup
、およびclick
イベントを連続して発生させようとしますが、ダブルタップはページをズームインおよびズームアウトするだけです。
Chromefor Androidは、指が画面に触れたときにtouchstartイベントを発生させます。すぐにリリースされると、mousedown
、mouseup
、touchend
、最後にclick
イベントが発生します。
ロングタップの場合、約0.5秒後にmousedown
およびmouseup
が発生し、指を離すとtouchend
が発生し、最後にclick
イベントは発生しません。
指を動かすの場合、touchmove
イベントが数回発生し、touchcancel
イベントが発生します。その後、指を持ち上げたときにtouchend
イベントでもなく、何も起こりません。
ダブルタップはズームイン/アウト機能をトリガーしますが、イベントごとにコンボtouchstart
-touchevent
を2回起動し、マウスイベントは起動しません。
FirefoxはAndroidに対してtouchstart
イベントを正しく起動し、短いタップの場合はmousedown
、mouseup
、touchend
およびclick
を起動します。
ロングタップの場合、mousedown
、mouseup
、最後にtouchend
イベントを起動します。これらについては、Chromeと同じです。
しかし指を動かすの場合、touchmove
を連続的に(予想されるように)起動する場合、not指が要素からイベントリスナーを離れるときにtouchleave
イベントを起動し、また、指がブラウザのビューポートから外れたときにtouchcancel
イベントを発生させません。
double tapsの場合、Chromeと同じように動作します。
Opera Mobileは、短いタップでChromeおよびFirefoxと同じことを行いますが、長押しの場合は何らかの共有をアクティブにします私が本当に無効にしたい機能。指を動かすか、ダブルタップすると、Firefoxのように動作します。
Chrome betaは通常の短いタップを行いますが、長いタップの場合はmouseup
イベントをもう発生させず、単にtouchstart
、その後mousedown
2番目、次に指を離したときにtouchend
。指を動かすと、FirefoxとOpera Mobileのように動作するようになりました。
ダブルタップの場合、タッチイベントは発生しませんズームアウト時ですが、ズームイン時のみです。
Chromeベータ版は最も奇妙な動作を示しますが、ベータ版なので私は本当に文句を言うことはできません。
問題はです:タッチデバイスの最も一般的なブラウザでショートタップ、ロングタップ、ダブルタップを検出する簡単で方法はありますか?
残念ながら、Safariを搭載したiOSデバイス、またはWindows Phone 7/Phone 8/RTのIEでテストすることはできませんが、できればフィードバックをいただければ幸いです。
まだお持ちでない場合は、Hammer.jsのソースコードを読むことをお勧めします
https://github.com/hammerjs/hammer.js/blob/master/hammer.js
コメントとコードの間に約1400行あり、優れたドキュメントがあり、コードは理解しやすいです。
多くの一般的なタッチイベントを解決するために著者がどのように選択したかを見ることができます。
ホールド、タップ、ダブルタップ、ドラッグ、ドラッグスタート、ドラッグエンド、ドラッグアップ、ドラッグダウン、ドラッグレフト、ドラッグライト、スワイプ、スワイプアップ、スワイプダウン、スワイプレフト、スワイプライト、変換、トランスフォームスタート、トランスフォームエンド、回転、ピンチ、ピンチン、ピンチアウト、タッチ(ジェスチャー検出開始) 、リリース(ジェスチャ検出は終了)
ソースコードを読んだ後、タッチイベントがどのように機能するか、そしてブラウザがどのイベントを処理できるかをどのように識別するかについて、あなたはずっとよく理解できると思います。
非常に優れたリソースがあります https://patrickhlauke.github.io/touch/tests/results/ 驚異的な数のブラウザーにわたるイベントの順序を詳しく説明しています。また、定期的に更新されているようです(2016年9月、2016年8月に最後に更新されました)。
要点は、本質的にすべてがmouseover
および関連イベントをトリガーします。ほとんどの場合、タッチイベントもトリガーされます。これは、通常完了して(touchend
に到達)mouseover
の前に続き、click
に進みます(ページへの変更がない限り)コンテンツはこれをキャンセルします)。ありがたいことに、これらの厄介な例外は比較的まれです(サードパーティAndroidブラウザーおよびブラックベリープレイブック)。
リンクされたリソースは、非常に詳細なレベルになります。多くのオペレーティングシステム、デバイス、ブラウザーのテストのうち、最初の3つのサンプルを次に示します。
キーポイントのいくつかを要約するには:
mouseover
をトリガーします。一部のWindows Phoneブラウザーのみが2回目のタップでトリガーします。click
。 click
がページを変更する場合、キャンセルするmouseover
を指定しません(ほとんどの場合、そうするでしょう)mouseover
およびtouchstart
の後にtouchend
をトリガーします。これには、iOS7.1 Safari、ストックAndroid、Chrome、Opera、Android版Firefox、および一部(すべてのWindows Phoneブラウザーではありません)が含まれますmouseover
after touchstart
およびtouchend
。mouseover
をtouchstart
とtouchend
の間でトリガーしますtouchstart
またはtouchend
がありません。touchstart
およびtouchend
の後にmouseover
が続きます。touchstart
およびtouchend
イベントをトリガーしません。touchstart
およびtouchend
をサポートするMaブラウザーはおそらくないでしょう。ブラウザには、支援技術と組み合わされた信じられないほどの量のデータもあります。
Android 4.3のタッチイベントとマウスイベントに関する最新の観察結果を次に示します。
スワイプ時(touchstart-touchmove-touchend):
タップ時(touchstart-touchend):
Androidのデフォルトブラウザーにはいくつかの非標準の動作があります:
はい、タイマーをtouchstart
で開始し、touchend
で終了して、そこから選択できます。
また、スワイプすると、トリガーがtouchmove
になり、「指」の調整を取得し、touchend
がトリガーされる前にどれだけ移動したかを確認できます。
タッチイベントライブラリを使用するよりも簡単な方法があるかどうかはわかりませんが、単純な「タップ」、「ダブルタップ」、「スワイプ」イベント用に簡単に作成できると思います。