「href="#" onclick」について
某日記より。
<a href="#" onclick="...">検索</a>
と書かずに
<span style="cursor: pointer" onclick="...">検索</span>
と書いたほうがいいらしい。
せっかくなので、後者前者がダメな理由を書いてほしいな…と思ってたら、
Re:href="#" onclick の悪習[to-R]にちょっと書いてあった。
a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。
なるほど。
追記
onclickの関数内でreturn falseを返せば、hrefは呼ばれないみたい。なるほど。 ちょっと実験してみよう。
<a href="#c01" onclick="alert('テスト1')">テスト1</a>
<a href="#c02" onclick="alert('テスト2'); return false;">テスト2</a>
- テスト2 (falseを返す)
あ、本当だ。 テスト2をクリックした場合はアドレスバーのアンカー部分が変わらない。
<input type="submit" onsubmit="return false">
こう書いたときにフォームの内容が送られないのと同じなのかな。
追記2
と思ったら、テスト1もテスト2も普通にアンカーへ移動した。alertも実行されてない。 プレビュー画面だとそんなことはなかったのに。 もしかしたら、 href に指定したアンカーが実在するとダメなのかも。
<a href="#" onclick="alert('テスト3')">テスト3</a>
<a href="#" onclick="alert('テスト4'); return false;">テスト4</a>
- テスト4 (falseを返す)
↑でも結果は同じ。もしかしたら、 tDiary のプラグインと競合しているのかも。 以下のURLからこの日記を表示させればOKだった。 http://www.machu.jp/diary/20070731-1.html