Javascriptのonclickで#に飛ばさない方法

こんにちは!ぐちです。

タグ

Webサイトを作っている時に<a>タグでリンクを書いてもページ遷移ではなくjavascriptのonclick処理を行いたい場合があると思います。そんなときは下記のように書きますよね。

<a href="#" onclick="alert('hope');">リンク</a>

これだとちょっとカッコ悪いといいますかalert()が処理されたあと#へ遷移したようなURLになってしまいます。そこでどうするかといいますと・・・。

return false

onclickの処理の最後にreturn falseを書くことで本来の<a>タグの機能である遷移を動作しないように設定することができます。

<a href="#" onclick="alert('hope'); return false;">リンク</a>

こうすることでURLの末尾に#がつくことがなく違和感のない自然な動きをさせることができるようになります。

ちょっとしたTipsですが覚えておいて損はないと思います〜。

では今回はこの辺で。