spanタグのすすめ.Ajaxのクリックイベントはaタグからspanタグへ.

Ajax javascript jQuery

jQuery便利ですよね.業務でも個人でもよく使ってます.
数年前までは「onClickさん」や「javascript:void(0);さん」が跋扈していたんでしょうけど,随分少なくなってきた印象です.


そんな中,ずっと勘違いをしていたというか,「クリックのイベントはaタグに紐付けるべき」って思い込んでました.
↓みたいな,リンク要素っぽいやつです.自分はhrefに「javascript:void(0);」って書くのが嫌なのでいつも「#」にしてました.


a2span


つまり,jQueryでの以下のようなコードですね.

// タグ省略
$('#click_a').click(function() {
    alert('最新の情報にしちゃうょ');
});

<a id="click_a" href="#">郵便番号から住所を検索する</a>


これで,ひとつ気になることがあって.それは...

クリックしたらURLの後ろに「#」って付くんですけど！！ってことです.


クリック前： http://www.example.com/hoge.html
クリック後： http://www.example.com/hoge.html# ←コレ


どうしてaタグ使ってるのか回想してみました.たぶん,こんなこと思ってました.

  • IE6ではaタグ以外にhover属性とか付けられないから（専用スクリプト使えばいけるみたいです.検証してません）
  • onClickとか書いてた頃の名残
  • だってリンクっぽいじゃん
  • そもそも「#」が付くとかどうでもいい

でも,気になってしまったからには仕方ないので対策しようと思いました.

CSSでaタグっぽくすればいいとして,pタグとかかな？

いや,pタグはブロック要素だし.ってことで,spanタグでやるようにしました.
超どうでもいい話ですけど,疑問形の文章を見る度に東進ハイスクールのCM思い出します.

「いつやるの？今でしょ」


はい,全然関係ないですね.
具体的には,以下のようなCSSを書いてリンクっぽくしてみます.

// タグ省略
$('#click_a').click(function() {
    alert('最新の情報にしちゃうょ');
});

/* タグ省略 */
#click_a {
  cursol: pointer;
  text-decoration: underline;
  /* その他リンク色とか */
}
/* hover とかなんとか */

<span id="click_span">郵便番号から住所を検索する</a>


a2span


aタグと全く同じ見た目でリンクっぽい要素が出来ました.まぁ,手抜きして同じキャプチャ使ってますけど.

結論

  • aタグに縛られる必要はないと思っている.本当はいけないとかいう理由があったら教えて欲しい.
  • ちょっとCSSが面倒な気がするが,そこまでseriousじゃないと思う.
  • IE6のことが少しでも気になる人は再考したほうがいいかも.