[JavaScript] a href=”” onclick の使い方

onclickの使い方を調べていたら「href=”#” onclick の悪習」という記事を見つけたのでご紹介します。

JavaScript

a タグで実現する方法

ダメな例

<a href="#" onclick="...">検索</a>

a 要素の href 属性に値が入ってると onclick 属性の内容を実行後に href 属性の値を参照しようとしてしまいます。

また # が入ってる場合はページの一番上部にページ内遷移してしまいます。

良い例

<a href="javascript:void(0)" onclick="...">検索</a>

また onclick イベントハンドラを実行するなら、この書き方がスッキリしてて良さそうです。

<a href="javascript:(onclickの内容)">検索</a>

spanで代用する方法

<span style="cursor: pointer" onclick="...">検索</span>

以上です。

参考情報