モバイルWEB開発におけるクリック・タッチ・タップイベントの使い方を詳しく解説

今回は、モバイル WEB 開発におけるクリック、タッチ、タップ イベントの使用について詳しく説明します。モバイル WEB 開発でクリック、タッチ、タップ イベントを使用する際の 注意事項 とは何ですか。実践的なケースを見てみましょう。

1. クリックとタップの比較

どちらもクリック時にトリガーされますが、モバイルWEB側ではクリックに200~300ミリ秒かかるため、クリックイベントはクリックではなくタップを使用してください。

シングルタップとダブルタップ それぞれシングルクリックとダブルクリックを表します。

2. タップスルー処理について

クリックイベントの応答遅延を避けるため、zeptoフレームワークのタップを利用してデバイスブラウザ内でクリックイベントを移動させる場合、タップスルーが発生する場合があります。つまり、クリックすると、現在のレイヤーではないクリック イベントがトリガーされます。

処理方法:

(1)、

GitHubにはfastclickというライブラリがあり、モバイルデバイスのクリックイベントの応答遅延を回避することもできますhttps://github.com/ftlabs/fastclick
を使ってページに導入します。 script タグ (このライブラリは AMD をサポートしているため、AMD 仕様に従って、require.js などのモジュールローダーで導入することもできます)、次のように dom の準備ができたら本体上で初期化します。

$(function(){
    newFastClick(document.body);
})

そして、「遅延なしのクリック」を必要とする要素をクリック イベントにバインドできます (zepto のタップ イベントにはバインドされなくなったことに注意してください)。
もちろん、本体ではなく、特定の dom 上で初期化することもできます。この方法では、この dom とそのサブ要素のみが「遅延なし」のクリックを楽しむことができます

実際の開発では、次のことがわかりました。要素がバインドされている場合、fastclick を設定すると、クリックの応答速度がタップよりわずかに速くなります。笑

(2)、touchend イベントを要素にバインドし、 e.preventDefault();

$demo.on('touchend',function(e){//改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发
    $demo.hide()
    e.preventDefault();//阻止“默认行为”
})

<code style="font-size:1em !important;line-height:1.1em !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;color:#000000 !important;display:inline !important;margin:0px !important;padding:0px !important;border:0px !important;vertical-align:baseline !important;float:none !important;overflow:visible !important;"><span style='font-family: 微软雅黑, "Microsoft YaHei"; font-size: 14px;'></span>

🎜

3. タッチ イベント タッチは、タッチ スクリーン携帯電話のタッチ イベント用です。 現在、ほとんどのタッチ スクリーン携帯電話 Webkit カーネルはタッチ イベント モニタリングを提供しており、開発者はユーザーが画面に触れたときに何らかの情報を取得できます。

含まれるもの: touchstart、touchmove、touchend、touchcancel これら 4 つのイベント

touchstart、touchmove、touchend イベントは、mousedown、mouseover
、mouseup のトリガーに似ています。

touchstart: 指が画面に触れるとトリガーされます;

touchmove: 指が画面上で移動するとトリガーされます;

多くの人は無視します。 touchcancel は、いつトリガーされるかわからないためです。実際、指が画面から離れていない場合、警告や確認のポップアップ ボックスや android などのシステム レベルの操作が発生したときに touchcancel がトリガーされます。

システム機能のポップアップウィンドウ。

これら 4 つのイベントのトリガー順序は次のとおりです:

touchstart ->タッチ移動->…… ->タッチ移動

しかし、上記の 1 つのイベントを監視するだけでは、ダブルクリック、長押し、左右のスワイプ、ズームなど、タッチ スクリーン携帯電話で一般的な一部の ジェスチャー 操作の監視を完了するには十分ではありません。ジェスチャー操作。このタイプのジェスチャ アクションをカプセル化するには、これらのイベントの監視を組み合わせる必要があります。

実際、市場の多くのフレームワークは、jqmobile、zepto、jqtouch などのモバイル ブラウザー用にこれらのジェスチャをカプセル化していますが、一部の Android システムでは悲劇が起こりました (私は Android 4.0.x でテストしました)。 touchmove イベントと touchend イベントをうまくトリガーできません。例を次に示します。

たとえば、指で画面上でページを上から下にドラッグすると、理論的には touchstart がトリガーされます。 、何度も touchmove
を実行し、最後に touchend を実行しますが、Android 4.0 では、touchmove は 1 回だけトリガーされ、トリガー時間は touchstart
とほぼ同じで、touchend は直接トリガーされません。これは非常に深刻なバグです。多くの人が Google の問題 http://code.google.com/p/android/issues/detail?id=19827 で報告しています

今のところ、私はこの問題を見つけました。 android 4.0にはこのバグがあり、ios 3.x版にもあると言われています。

明らかに、jqmobile、zepto などは、監視実装に対するこのバグの深刻な影響を認識していないため、これらのフレームワークのイベントを直接使用すると、多かれ少なかれ互換性の問題が発生します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

よく使用される3d15d9143623c57ca35f52d104ca77d2コード構成の概要

JSを使用して関数パラメータ名を取得する方法

以上がモバイルWEB開発におけるクリック・タッチ・タップイベントの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。