ライブラリのいくつかをタッチ デバイスで動作させようとしていますが、それらがどのようにサポートされ、どのように機能するかを理解するのに苦労しています。
基本的にタッチイベントは5つあるのですが、モバイルブラウザではイベントだけでコンセンサスが取れているようですtouchstart(当たり前)。テストケースとしてフィドルを作成しました。
Android 4 を搭載した Galaxy Note でこれをテストしましたが、デスクトップ ブラウザでもリンクを確認できます。
目標は、タップ、ダブルタップ、ロングタップの処理方法を理解することです。派手なものはありません。
基本的には、次のようになります。
Android ストック ブラウザはタッチ イベントを発生させません。mousedownタップ、発火、mouseupおよびイベントを連続して使用してマウスクリックをエミュレートしようとしますがclick、ダブルタップはページをズームインおよびズームアウトするだけです。
Chrome for Android は、指が画面に触れると touchstart イベントを発生させます。すぐにリリースされるとmousedown、 、mouseup、touchendおよび最後にclickイベントが発生します。
ロング タップの場合、約 0.5 秒後に と が発火mousedownしmouseup、touchend指を離すとclick、最後にイベントは発生しません。
指を動かすと、touchmoveイベントが数回発生し、その後イベントが発生しますtouchcancelが、その後は何も起こりませんtouchend。指を離してもイベントは発生しません。
ダブルタップするとズームイン/ズームアウト機能がトリガーされますが、イベントごとにコンボが発生します.2touchstart回touchevent、マウスイベントは発生しません。
Android 版Firefoxはイベントを正しく起動し、touchstart短いタップの場合はmousedown、mouseup、touchendおよびclickその後に起動します。
ロングタップの場合は発火mousedownし、mouseup最後にtouchendイベント。これらはChromeと同じです。
しかし、指を動かした場合、 if はtouchmove(予想どおり) 継続的に発生しますが、指がイベント リスナーを使用して要素を離れたときにイベントを発生させず、指がブラウザーのビューポートから出たときにイベントを発生させません。 .touchleavetouchcancel
ダブルタップの場合、Chrome と同じように動作します。
Opera Mobileは、短いタップで Chrome や Firefox と同じことを行いますが、長押しすると、無効にしたい共有機能がアクティブになります。指を動かしたり、ダブルタップしたりすると、Firefox と同じように動作します。
Chrome ベータ版は短いタップに対しては通常どおり行いますが、長いタップの場合はイベントを発生させず、0.5 秒後、指を離したときにmouseupイベントを発生させます。指を動かすと、Firefox や Opera Mobile のように動作するようになりました。touchstartmousedowntouchend
ダブルタップの場合、ズームアウト時にはタッチイベントを発生させず、ズームイン時にのみ発生させます。
Chrome ベータ版は最も奇妙な動作を示しますが、ベータ版なので文句は言えません。
問題は、タッチ デバイスの最も一般的なブラウザで、短いタップ、長いタップ、およびダブル タップを検出するための簡単な方法があるかどうかです。
残念ながら、Safari を搭載した iOS デバイスや Windows Phone 7/Phone 8/RT 用の IE でテストすることはできません。
