<a>タグにonclick属性を使うときの書き方

<a>タグにonclickを使おうと書き方を調べたらでてくるでてくる。 この件については、昔からよく言われているみたいですね。備忘録がてらめもめも。 なにやらちょっとだけ物議を醸してたようですね。

参考サイト様

■2007/7/24 某日記 - ☆href="#" onclick の悪習
■2007/7/31 まちゅダイアリー - 「href="#" onclick」について
■2007/8/1 to-R - Re:href="#" onclick の悪習 ← ドーナツ本で有名な西畑さんのブログ
■2010/6/9 American Life in the Summertime - Aタグにonclickを設定する場合の話
■2011/10/12 CodeNote.net - [JavaScript][html] a href=”” onclick の使い方
■2012/9/7 code14 - javascriptでaタグにonclickつけるときにreturn falseもつける

つまり…？

<a href="#" onclick="hogehoge">リンク</a>

これだとonclick属性でhogehogeが実行されたあとにhrefが参照されちゃう、 上例のようにhrefが"#"だとhogehoge実行後に余計にページ最上部にとんでしまうって話です。

以下の二つのように書くと良いみたい

<a href="javascript:void(0)" onclick="hogehoge">リンク</a>

<a href="#" onclick="hogehoge;return false;">リンク</a>

spanの代用もあるけど、なんか個人的にしっくりこないや

<span style="cursor: pointer" onclick="hogehoge">リンク</span>

人によって書き方がそれぞれで、これが正しい、それは間違いと主張がいろいろですが、今はどれが慣習として適切なんでしょうかね？

■2008/2/12 燈明日記 - [WEB] javascript:void(0)について

ちなみにこちら↑のサイト様によるとonclick属性でリンク処理をする場合は、onclick属性のリンク処理とhrefのリンク処理がかぶっちゃって悪さするため、javascript:void(0) と return false を併記するとよいとのこと。 あくまでもonclick属性でリンク処理するときの話ですかね。

ではでは！