a要素のリンクを無効化したいときには何が一番いいんだろう

20160726

:target疑似クラスを使ってなにかやりたいときとか、JavaScriptのトリガーとして使いたい時に、リンクを無効化したい時がありますが、いったいどれがいいのか悩み中です。

今のところ実際には(2)を使ってますが、下記のブログ記事を見かけて、気になっていろいろ調べてみました。

Re:href=”#” onclick の悪習 – to-R (2007年の記事)


(1)hrefを空にしてhref=””にする?

<a href="" onClick="...;">リンク</a>

これはエラーになってしまったり、無駄なリクエストが裏で発生するので、やらないほうがいいみたいです。

src=””とhref=””で無駄リクエストが発生する問題、ブラウザ対応状況 | マイナビニュース (2010年の記事)


(2)href=”#”に

<a href="#" onClick="...;return false;">リンク</a>

これだとページトップに飛んでしまうので、動作させないよう、onClick="return false;"を追加。


(3)javascript:void(0)を使用

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

これはマウスオーバー時に「javascript:void(0)」とリンク先が表示されてしまうけど、無駄な動作はなさそう・・・。
※IE6の対策をするなら、さらにonClick="return false;"を追加。


そもそもa要素を使わない方法とかもありそう。
もうちょっと調べて追記していきたいと思います。

このエントリーをはてなブックマークに追加
はてなブックマーク - a要素のリンクを無効化したいときには何が一番いいんだろう
[`evernote` not found]
このエントリーを Google ブックマーク に追加
[`yahoo` not found]
[`livedoor` not found]
Facebook にシェア