onclick属性でhistory.back()などを使う場合に、

onclick属性で良く使うと思われるのが、history.back()です。最近は使われないのかな？よく分かりませんけど・・・。その使い方に関して。

<a href="#" onclick="history.back()">戻る</a>

や

<form>
 <p><input type="button" value="戻る" onclick="history.back()" /></p>
</form>

等というように使っている人を良く見ます。しかし、これはいくない。どこが良くないかっていうと、まず、上のやつ。

href属性が「#」になってますね。これ、Firefoxではよく分からない動作をする(onclickとhrefクリックが同時に起こる?(自信無し))ので、そのまんまのページに行くようになってしまう事もあります。

次に、下のやつですが、formにはaction属性が必須です。action="#" とかやるのも手ですが、賢くありません。

ま、タグの中身のことはどうでもよくって、、、

以上2つの共通点は、「戻る」という文字列をクリックできるように見せるために、aタグやinputタグを用いているということです。

要はクリックできるように見せられれば、別にaタグやinputタグじゃなくても良いわけです。

クリックできるように見せるというのは、マウスカーソルを変更することと言っていいと思います。矢印のカーソルから手の形に変われば、ほとんどの人はクリックできると思うでしょう。

クリックできるように見せるには、CSSのcursorプロパティで実現できます。

まず、ごく普通のリンクに見せかけてみます。サンプル。。

span.back {
 text-decoration: underline;
 color: blue;
 cursor: pointer;
}

次は画像を使う場合。

p.back {
 width: 125px;
 height: 50px;
 cursor: pointer;
 text-indent: -99999px;
 background: url(./img/back_1.png) no-repeat center;
 border: 1px solid #ccc;
}

などと書いて、

<p class="back" onclick="history.back()">もどる</p>

<span class="back" onclick="history.back()">戻る</span>

と書けば代ジョブ？・・・・・で、ここまで書いてなんなんですが、

<a href="javascript:history.back();">戻る</a>

という風に書けば済むんじゃね？書いてから気づいた('A`)。。。そんなオチ。。

でも、onclickを使うときには、cssでcursorを指定するといいよっていう教えになったでしょ？