ホームページ > 記事 > ウェブフロントエンド > js でのクリックイベントと一般的に使用されるイベントの概要 (PC およびモバイル)

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

php是最好的语言オリジナル: 2018-08-07 10:10:315187ブラウズ

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 でのクリック イベントと一般的に使用されるイベントの概要 (PC およびモバイル)

関連記事

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