22
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

リンクをクリックしたときの動作を無効にして、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);
});
22
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?