ホームページ > ウェブフロントエンド > jsチュートリアル > 以下に、JavaScript リンクをクリックした後にページが上部にスクロールする問題に焦点を当てた、提供された記事の質問ベースのタイトルをいくつか示します。 短くて直接的: ※ページスクロールを止める方法

以下に、JavaScript リンクをクリックした後にページが上部にスクロールする問題に焦点を当てた、提供された記事の質問ベースのタイトルをいくつか示します。 短くて直接的: ※ページスクロールを止める方法

Mary-Kate Olsen
リリース: 2024-10-26 11:32:29
オリジナル
706 人が閲覧しました

Here are some question-based titles for your provided article, focusing on the problem of page scrolling to the top after a JavaScript link click:

Short & Direct:

* How to Stop Page Scrolling to Top on JavaScript Link Click?
* Why Does My Page Jump to T

JavaScript リンクでページが先頭にスクロールしないようにする方法 クリック:

アンカーなどのリンクされた要素から JavaScript イベントをトリガーする場合

解決策:

この望ましくない動作を防ぐには、イベントを抑制する必要があります。クリックイベントのデフォルトアクション。これは、次の 2 つの方法を使用して実現できます。

1. event.preventDefault():

イベント ハンドラーに渡されたイベント オブジェクトで .preventDefault() メソッドを呼び出すことで、リンク ターゲットに移動するデフォルトの動作を防ぐことができます。

例 (jQuery):

1

2

3

4

<code class="javascript">$('#my-link').click(function(event) {

  event.preventDefault();

  // Your JavaScript code here

});</code>

ログイン後にコピー

例 (DOM):

1

2

3

4

<code class="javascript">document.getElementById('my-link').addEventListener('click', function(event) {

  event.preventDefault();

  // Your JavaScript code here

});</code>

ログイン後にコピー

2. return false:

jQuery では、イベント ハンドラーから false を返すと、.stopPropagation() メソッドと .preventDefault() メソッドの両方が自動的に呼び出されます。

例 (jQuery):

1

2

3

4

<code class="javascript">$('#my-link').click(function(event) {

  // Your JavaScript code here

  return false;

});</code>

ログイン後にコピー

生の DOM イベントを使用する場合は、古いブラウザーとの互換性を最大限に高めるために、.preventDefault() を明示的に呼び出すことをお勧めします。詳細については、event.preventDefault() と return false に関するドキュメントを参照してください。

以上が以下に、JavaScript リンクをクリックした後にページが上部にスクロールする問題に焦点を当てた、提供された記事の質問ベースのタイトルをいくつか示します。 短くて直接的: ※ページスクロールを止める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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