リンクのデフォルト動作を無効にして、JavaScriptを実行させる

リンクをクリックしたときの動作を無効にして、JavaScriptを実行させるためのいくつかの方法をまとめました。

　

href 属性に # を指定する。クリックするたびに画面の上に移動するから迷惑！

<a href="#" onclick="myMethod()">Click Me</a>

　

href でデフォルト動作を無効にして、onclick属性を追加

<a href="javascript:void(0)" onclick="myMethod()">Click Me</a>

　

href 属性に全部書く。

<a href="javascript:myMethod();void(0)">Click Me</a>

　

デフォルトのイベントを無効にする。JavaScriptが無効な場合、リンクが動作するのがメリット。

Event.preventDefault() を使うとデフォルトの動作をキャンセルできる

<a href="http://www.google.com/">Click Me</a>
$('a').on('click', function(e){
    e.preventDefault()
    console.log(this);
});