[解決済み] JavaScriptを起動するリンクがクリックされたときに、Webページが一番上にスクロールしないようにするにはどうしたらよいですか？

質問

jQueryやJavaScriptのイベントで配線されたリンクがある場合、以下のようになります。

<a href="#">My Link</a>

ページが一番上にスクロールするのを防ぐには？ アンカーから href 属性を削除すると、ページは上部にスクロールしませんが、リンクはクリックできないように見えます。

どのように解決するのですか？

クリックイベントのデフォルトアクション（リンク先への移動など）が発生しないようにする必要があります。

これを行うには、2つの方法があります。

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

を呼び出す。 .preventDefault() メソッドを呼び出します。jQuery を使ってハンドラをバインドしている場合、そのイベントは jQuery.Event のインスタンスとなり、それはjQueryバージョンの .preventDefault() . もし、あなたが addEventListener を使ってハンドラをバインドしている場合は Event であり、生の DOM 版である .preventDefault() . どちらかの方法で、必要なことを行うことができます。

例を挙げます。

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

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

オプション 2: return false;

jQueryの場合 :

イベントハンドラから false を返すと、自動的に event.stopPropagation() と event.preventDefault() が呼び出されます。

つまり、jQueryでは、デフォルトのリンクの挙動を防ぐために、この方法を代わりに使うことができるのです。

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

生の DOM イベントを使用している場合、HTML 5 仕様がこの動作を規定しているため、これはモダンブラウザでも動作します。しかし、古いバージョンの仕様ではそうではないので、古いブラウザとの互換性を最大にしたい場合は .preventDefault() を明示的に呼び出す必要があります。参照 event.preventDefault() vs. return false (jQueryなし) を参照してください。