[解決済み] 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;
イベントハンドラから false を返すと、自動的に event.stopPropagation() と event.preventDefault() が呼び出されます。
つまり、jQueryでは、デフォルトのリンクの挙動を防ぐために、この方法を代わりに使うことができるのです。
$('#ma_link').click(function(e) {
doSomething();
return false;
});
生の DOM イベントを使用している場合、HTML 5 仕様がこの動作を規定しているため、これはモダンブラウザでも動作します。しかし、古いバージョンの仕様ではそうではないので、古いブラウザとの互換性を最大にしたい場合は
.preventDefault()
を明示的に呼び出す必要があります。参照
event.preventDefault() vs. return false (jQueryなし)
を参照してください。
関連
-
[解決済み] テスト
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] (a== 1 && a ==2 && a==3) が真に評価されることはあるのでしょうか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
Vueにシンプルなメモ帳機能を実装
-
JavaScriptの配列共通メソッド解説
-
vueディレクティブv-bindの使用と注意点
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。