Edited at

<a href="#">のclickイベントで、表示を移動させないようにするには

More than 1 year has passed since last update.

下記のようなhtmlに対しclickイベントを設置し、


html

<a class="btn" href="#">Click Me!</a>



JavaScript

document.getElementById('.btn').addEventListener('click', function() {

console.log('hogehoge');
});

ってやってクリックすると、画面が一番上に…


原因

aタグクリック時の規定アクションのためにページ最上部に遷移してしまうようです。

この規定アクションを無効化する必要があります。


解決策

returen false;を入れたら回避しました。


JavaScript

document.getElementById('.btn').addEventListener('click', function() {

console.log('hogehoge');
return false;
});

returnだけだとIE6で動作しないので、クロスブラウザ対策です。


参考にしたサイト

aタグのonClick、href="#"で表示を移動させたくない - おはようバッファロー


追記

return false;の代わりに

イベントの規定アクションを無効化するevent.preventDefault();メソッドも利用できるとコメントいただきました。


JavaScript

document.getElementById('.btn').addEventListener('click', function(event) {

console.log('hogehoge');
event.preventDefault();
});

「aタグの無効化 - preventDefaultとreturn falseの違いとか」にこれらの違いがまとめてあります。