JavaScript リンクをクリックしたときに不要なページがスクロールされるのを防ぐにはどうすればよいですか?

JavaScript リンクのクリック時のページ スクロールの防止

Web ページに JavaScript イベントをトリガーすると同時に新しいページに移動するリンクが含まれている場合、ページが一番上までスクロールするという、望ましくない副作用が発生する可能性があります。この動作により、ユーザー フローが中断され、Web サイトの意図した機能が中断される可能性があります。

このスクロール動作を防ぐには、リンクのクリックに関連付けられたデフォルトのアクション (ターゲット URL へのリダイレクト) を無効にする必要があります。これを実現するための 2 つの効果的な方法を次に示します。

オプション 1:event.preventDefault()

このメソッドを使用すると、.preventDefault を呼び出すことでデフォルトのアクションを明示的に防止できます。イベント ハンドラーに渡されるイベント オブジェクトの () メソッド。

• jQuery:

  <code class="js">$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
  });</code>

  ログイン後にコピー

• addEventListener (生 DOM):

  <code class="js">document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
  })</code>

  ログイン後にコピー

オプション 2: return false;

jQuery では、イベント ハンドラーは、.stopPropagation() メソッドと .preventDefault() メソッドの両方を自動的に呼び出します。これは、デフォルトのリンク動作を防ぐ別の方法を提供します。

<code class="js">$('#ma_link').click(function(e) {
     doSomething();
     return false;
});</code>

生の DOM イベント (jQuery ではない) を使用している場合、false を返すことは最新のブラウザでも機能しますが、古いブラウザとの互換性を最大限に高めるために、 .preventDefault().

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