ホームページ > ウェブフロントエンド > jsチュートリアル > ブラウザの「戻る」ボタンの押下とページ内の戻るナビゲーションを確実に検出するにはどうすればよいでしょうか?

ブラウザの「戻る」ボタンの押下とページ内の戻るナビゲーションを確実に検出するにはどうすればよいでしょうか?

Patricia Arquette
リリース: 2024-12-09 20:44:11
オリジナル
739 人が閲覧しました

How Can We Reliably Detect Browser Back Button Presses vs. In-Page Back Navigation?

ブラウザの戻るボタンの検出とページ内の戻るボタンの強制

ユーザーがブラウザの戻るボタンをアクティブにしたかどうかを識別することは、永続的な課題でしたウェブ開発で。この質問では、特にハッシュ ナビゲーションを利用する単一ページ アプリケーションにおいて、この目標を達成するためのさまざまな手法を検討します。

一般的なアプローチの 1 つは、URL 内のハッシュの変更を追跡する window.onhashchange の使用です。ただし、このメソッドは、ページ内要素がハッシュを変更するときにもトリガーされ、一貫性のないユーザー エクスペリエンスにつながることがよくあります。

代わりに、ユーザーがインターフェイスを移動するときに以前のハッシュ値を保存する配列を作成することをお勧めします。 。 window.location.lastthash.push(window.location.hash) を使用してこの配列を継続的に更新することにより、システムはハッシュ変更の履歴を維持します。

さらに、ブラウザーの戻るボタンとページ内で戻るボタンを区別するために、ボタンの場合、ソリューションはマウス イベントを利用します。マウスがドキュメント領域内にあるときはブール値フラグ window.innerDocClick を true に設定し、マウスがドキュメント領域から離れるときは false に設定すると、システムはユーザーがブラウザの戻るボタンを使用しているか、ページ内の戻るボタンを使用しているかを追跡できます。

このメカニズムにより、ハッシュの変更をより詳細に制御できるようになり、開発者がブラウザの「戻る」ボタンのイベントを個別に処理し、カスタムのページ内ナビゲーションを実装できるようになります。

さらに、バックスペースを防ぐためキーストロークが back イベントのトリガーに影響しないように、このソリューションには、非入力要素の backspace キーをインターセプトする jQuery イベント ハンドラーが組み込まれています。これらのイベントを飲み込むことで、ユーザーがバックスペースを使用してフォーム フィールドやテキスト エディターの入力をクリアするときに、誤って逆方向に移動することがなくなります。

以上がブラウザの「戻る」ボタンの押下とページ内の戻るナビゲーションを確実に検出するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート