JavaScriptを使用してリンククリック時のページスクロールを防ぐにはどうすればよいですか?

JavaScript を使用したリンク クリック時のページ スクロールの防止

JavaScript または jQuery を利用してリンクの動作を強化する場合、一般的にクリック時に問題が発生します。リンクにより、ページが一番上までスクロールします。この動作を防止したい場合は、いくつかのオプションがあります。

まず、event.preventDefault() メソッドを検討してください。ハンドラーに渡されたイベント オブジェクトでこのメソッドを呼び出すと、デフォルトのアクション (リンク ターゲットへの移動など) が効果的に無効になります。これは、jQuery の $e.preventDefault() を使用するか、DOM のネイティブ Event.preventDefault() を使用するかに関係なく機能します。

たとえば、次の jQuery コードはスクロールを防止します。

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

Anotherオプションは、jQuery の return false を利用することです。行動。イベント ハンドラーから false を返すと、event.stopPropagation() とevent.preventDefault() の両方が自動的に呼び出されます。したがって、次のアプローチを使用できます。

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

さらに、生の DOM イベントを好む場合は、最新のブラウザで false を返すと、デフォルトのリンク動作が防止されます。ただし、HTML5 仕様には当初この動作が含まれていなかったため、古いブラウザとの互換性を最大限に高めるために、.preventDefault() を明示的に呼び出すことをお勧めします。

以上がJavaScriptを使用してリンククリック時のページスクロールを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。