web-dev-qa-db-ja.com

タッチイベントについて

ライブラリの一部をタッチデバイスで動作させようとしていますが、どのようにサポートされているか、どのように動作するかを理解するのに苦労しています。

基本的に、 5タッチイベント がありますが、touchstartイベント(duh)についてのみモバイルブラウザ間でコンセンサスがあるようです。テストケースとして fiddle を作成しました。

Android 4を搭載したGalaxy Noteでこれをテストしましたが、デスクトップブラウザーでもリンクを確認できます。

目標は、タップ、ダブルタップ、ロングタップの処理方法を理解することです。派手なものは何もありません。

基本的に、これは何が起こるかです:

Androidストックブラウザはタッチイベントを起動しません。タップでマウスクリックをエミュレートし、mousedownmouseup、およびclickイベントを連続して発生させようとしますが、ダブルタップはページをズームインおよびズームアウトするだけです。

Chromefor Androidは、指が画面に触れたときにtouchstartイベントを発生させます。すぐにリリースされると、mousedownmouseuptouchend、最後にclickイベントが発生します。

ロングタップの場合、約0.5秒後にmousedownおよびmouseupが発生し、指を離すとtouchendが発生し、最後にclickイベントは発生しません。

指を動かすの場合、touchmoveイベントが数回発生し、touchcancelイベントが発生します。その後、指を持ち上げたときにtouchendイベントでもなく、何も起こりません。

ダブルタップはズームイン/アウト機能をトリガーしますが、イベントごとにコンボtouchstart-toucheventを2回起動し、マウスイベントは起動しません。

FirefoxはAndroidに対してtouchstartイベントを正しく起動し、短いタップの場合はmousedownmouseuptouchendおよびclickを起動します。

ロングタップの場合、mousedownmouseup、最後に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でテストすることはできませんが、できればフィードバックをいただければ幸いです。

77
MaxArt

まだお持ちでない場合は、Hammer.jsのソースコードを読むことをお勧めします

https://github.com/hammerjs/hammer.js/blob/master/hammer.js

コメントとコードの間に約1400行あり、優れたドキュメントがあり、コードは理解しやすいです。

多くの一般的なタッチイベントを解決するために著者がどのように選択したかを見ることができます。

ホールド、タップ、ダブルタップ、ドラッグ、ドラッグスタート、ドラッグエンド、ドラッグアップ、ドラッグダウン、ドラッグレフト、ドラッグライト、スワイプ、スワイプアップ、スワイプダウン、スワイプレフト、スワイプライト、変換、トランスフォームスタート、トランスフォームエンド、回転、ピンチ、ピンチン、ピンチアウト、タッチ(ジェスチャー検出開始) 、リリース(ジェスチャ検出は終了)

ソースコードを読んだ後、タッチイベントがどのように機能するか、そしてブラウザがどのイベントを処理できるかをどのように識別するかについて、あなたはずっとよく理解できると思います。

http://eightmedia.github.io/hammer.js/

25
vrtis

非常に優れたリソースがあります https://patrickhlauke.github.io/touch/tests/results/ 驚異的な数のブラウザーにわたるイベントの順序を詳しく説明しています。また、定期的に更新されているようです(2016年9月、2016年8月に最後に更新されました)。

要点は、本質的にすべてがmouseoverおよび関連イベントをトリガーします。ほとんどの場合、タッチイベントもトリガーされます。これは、通常完了して(touchendに到達)mouseoverの前に続き、clickに進みます(ページへの変更がない限り)コンテンツはこれをキャンセルします)。ありがたいことに、これらの厄介な例外は比較的まれです(サードパーティAndroidブラウザーおよびブラックベリープレイブック)。

リンクされたリソースは、非常に詳細なレベルになります。多くのオペレーティングシステム、デバイス、ブラウザーのテストのうち、最初の3つのサンプルを次に示します。

enter image description here

キーポイントのいくつかを要約するには:

モバイルブラウザ

  • リストされているすべてのブラウザは、最初のタップでmouseoverをトリガーします。一部のWindows Phoneブラウザーのみが2回目のタップでトリガーします。
  • すべてのトリガーclickclickがページを変更する場合、キャンセルするmouseoverを指定しません(ほとんどの場合、そうするでしょう)
  • ほとんどのブラウザは、mouseoverおよびtouchstartの後にtouchendをトリガーします。これには、iOS7.1 Safari、ストックAndroid、Chrome、Opera、Android版Firefox、および一部(すべてのWindows Phoneブラウザーではありません)が含まれます
  • いくつかのWindows Phoneブラウザー(すべてのWindows 8/8.1および10の1つのバージョン)およびいくつかのサードパーティAndroidブラウザー(Dolphin、Maxathon、UC)がトリガーmouseoverafter touchstartおよびtouchend
  • Blackberry Playbookのみがmouseovertouchstarttouchendの間でトリガーします
  • Opera MiniとPuffin(サードパーティAndroidブラウザー)のみにtouchstartまたはtouchendがありません。

デスクトップブラウザ

  • 最新バージョンのデスクトップChromeおよびOperaは、対応するモバイルバージョンのように動作します。touchstartおよびtouchendの後にmouseoverが続きます。
  • FirefoxおよびMicrosoftブラウザー(IE <= 11およびEdgeの多くのバージョン)は、touchstartおよびtouchendイベントをトリガーしません。
  • Macにはデータはありませんが、Macタッチスクリーンインターフェイスが不足しているため、touchstartおよびtouchendをサポートするMaブラウザーはおそらくないでしょう。

ブラウザには、支援技術と組み合わされた信じられないほどの量のデータもあります。

8
user568458

Android 4.3のタッチイベントとマウスイベントに関する最新の観察結果を次に示します。

Opera、Firefox、およびChromeには標準的な動作があるようです

  1. スワイプ時(touchstart-touchmove-touchend):

    1. マウスイベント(マウスオーバーを除く)は発生しません。
    2. 同じ要素でtouchstartとtouchendが発生した場合にのみ、マウスオーバーが起動します。 (touchstart-touchmove-touchend-mouseover)
    3. タッチスタートでデフォルトが禁止されている場合:デフォルトのスワイプ動作は機能しません。マウスイベントの発生に関する変更は発生しません。
  2. タップ時(touchstart-touchend):

    1. すべてのマウスイベントmouseover-mousemove-mousedown-mouseup-clickが遅れて発生する
    2. タッチスタートでデフォルトが禁止されている場合:マウスオーバーのみが起動します。

Androidのデフォルトブラウザーにはいくつかの非標準の動作があります

  1. マウスオーバーはタッチスタートの前に起動します。つまり、マウスオーバーは常に起動します。
  2. タッチスタートでデフォルトが禁止されている場合でも、すべてのマウスイベントはTapで発生します。
3
Semra

はい、タイマーをtouchstartで開始し、touchendで終了して、そこから選択できます。

また、スワイプすると、トリガーがtouchmoveになり、「指」の調整を取得し、touchendがトリガーされる前にどれだけ移動したかを確認できます。

タッチイベントライブラリを使用するよりも簡単な方法があるかどうかはわかりませんが、単純な「タップ」、「ダブルタップ」、「スワイプ」イベント用に簡単に作成できると思います。

2
Alexandru Calin