js でのクリック イベントと一般的に使用されるイベントの概要 (PC およびモバイル)

1. クリック イベント:

PC 側のクリック イベントですが、モバイル プロジェクトでは、クリックの動作とダブルクリックの動作を区別することがよくあります。したがって、モバイルブラウザは、クリックを識別するとき、クリックであることが確認された後にのみ実行されます。モバイル端末でクリックを使用する場合、300ミリ秒の遅延が発生します。最初のクリックが完了した後、ブラウザは待機する必要があります。 2 回目のクリックがトリガーされたかどうかを確認するために 300 ミリ秒。2 回目のクリックがトリガーされた場合はクリックに属しません。ただし、シナリオによってはこれが必要です。遅延をキャンセルするには:

(1) 静止ズーム: 目標を達成するには、この方法を使用してスケーリングを完全に無効にする必要があります。ほとんどのモバイル端末ではこの遅延の問題を解決できますが、一部の Apple 携帯電話ではまだ解決できません。 ; height - ビューポートの高さ、initial-scale - 最小スケール - ユーザーがズームできる最小比率、 user-scalable - ユーザーが手動でズームできるかどうか

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

(2) fastclick.js: FastClick は、モバイル ブラウジングを解決するために特別に設計された FT Labs です。300 ミリ秒のクリック遅延の問題を解決するために開発された軽量ライブラリです。つまり、FastClick はタッチエンド イベントを検出すると、DOM カスタム イベントを通じてシミュレートされたクリック イベントを即座にトリガーし、300 ミリ秒後にブラウザーによって実際にトリガーされるクリック イベントをブロックします。 ステップ 1: ページ上で fastclick を導入します。 jsファイル。 ステップ 2: 次のコードを js ファイルに追加します。ウィンドウの読み込みイベントの後、本文で FastClick.attach() を呼び出します。

window.addEventListener(function(){   
    FastClick.attach( document.body );  
},false );

プロジェクトで JQuery を使用している場合は、上記のコードを次のように書き換えます:

$(function() {    
    FastClick.attach(document.body);    
});

モバイル側のクリック イベントを置き換えます:

(1) touchstart を使用します: touch イベントには touchstart、touchend、touchmove などが含まれます。 touchstart を使用して click を置き換えますが、問題は、クリック イベントとスライド イベントを同じオブジェクトにバインドしたい場合、指が要素をクリックするとモバイル側で競合が発生することです。通過します: touchstart -- > touchmove -> touchend -->click

タッチ イベント モデル:

機能

タッチムーブタッチエンドタッチキャンクル特別な状況下で閉店/終了するときにトリガーされます属性名

タッチスタート	画面を指で押します
画面上で指をスワイプします
画面から指を離してください
	タッチイベントの属性:

機能

ターゲットpreventDefault(returnValue)伝播を停止(バブルをキャンセル)touches[0].clientXタッチが変わりました

(2) タップイベント: 標準イベントにはタップイベントはありません。タップイベントは、タッチを使用して、時間と指の位置が記録され、タッチエンドで比較されます。指の位置が同じで時間間隔が短く、プロセス中に touchmove イベントがトリガーされない場合、コールバック関数は 300ms 後にも生成されますが、その時点では監視は行われません。オブジェクトが表示され、「クリックスルー」現象が発生します。 1) ページ上にモーダル ボックスが表示されます。モーダル ボックス上にボタンがあり (モーダル ボックスを閉じます)、ボタンのすぐ下に入力ボックスがあります。メイン ページ); 2) モーダル ボックスの閉じるボタンをクリックすると、モーダル ボックスはすぐに消えますが、クリック イベントは 300 ミリ秒後にトリガーされ、入力ボックスはたまたまクリック イベントをリッスンするため、入力ボックスはフォーカスを取得

PC でよく使用されるイベント:

タイプ	イベントタイプ
イベントソース
デフォルトの動作をブロックする
事件の拡大を阻止してください
タッチ位置のx値
現在値と左値

イベント名	機能
クリック	マウスをクリックすると起動します
マウスオーバー	マウスポインタが要素上を移動すると発生します
マウスアウト	マウスポインタが要素の外に移動すると発生します
マウスエンター	マウスポインタが要素上を移動するとトリガーされます（バブリングはサポートされていません）
マウス離れる	マウスポインターが要素の外に移動するとトリガーされます (バブリングはサポートされていません)
マウス移動	マウスポインタが要素上を移動すると発生します
マウスダウン	要素上でマウスボタンが押されたときに発生します
マウスアップ	要素上でマウスボタンが離されたときに発生します
マウスホイール	マウスホイールのスクロール時に実行されるスクリプト
キーダウン	ユーザーがキーを押すと起動します
キーアップ	ユーザーがキーを放したときに起動します
ロード	ページの読み込みが完了した後にトリガーされます
スクロール	要素のスクロールバーがスクロールされたときに実行されるスクリプト
ぼかし	要素がフォーカスを失ったときに実行されるスクリプト
集中	要素がフォーカスを取得したときに実行されるスクリプト
変更	要素の値が変更されたときに実行されるスクリプト

モバイル端末でよく利用されるイベント:

イベント名	機能
クリック	クリックすると発火します(クリック)
ロード	ページの読み込みが完了した後にトリガーされます
スクロール	要素のスクロールバーがスクロールされたときに実行されるスクリプト
ぼかし	要素がフォーカスを失ったときに実行されるスクリプト
集中	要素がフォーカスを取得したときに実行されるスクリプト
変更	要素の値が変更されたときに実行されるスクリプト
入力	キーアップとキーダウンを置き換えます
タッチイベントモデル	一本指操作の処理
ジェスチャーイベントモデル	複数の指での操作の処理

関連する推奨事項:

ネイティブ JS を使用してタップ イベントをカプセル化し、モバイル側での 300 ミリ秒の遅延を解決します

JavaScript モバイル イベントの基礎と一般的に使用されるイベント ライブラリの概要を詳しく紹介します

以上がjs でのクリック イベントと一般的に使用されるイベントの概要 (PC およびモバイル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。