«前の日記(2007-07-28 (土)) 最新 次の日記(2007-08-02 (木))»  

まちゅダイアリー


2007-07-31 (火)

「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をクリックした場合はアドレスバーのアンカー部分が変わらない。

<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>

↑でも結果は同じ。もしかしたら、 tDiary のプラグインと競合しているのかも。 以下のURLからこの日記を表示させればOKだった。 http://www.machu.jp/diary/20070731-1.html

Tags: memo
本日のツッコミ(全3件) [ツッコミを入れる]
kawaguti (2007-08-02 (木) 09:38)

>>後者がダメな理由<br>ダメなのは「前者」ですよね

ハタ (2007-08-02 (木) 14:04)

onclickの関数内でreturn falseを返せば、hrefは呼ばれないんじゃないですかねー

まちゅ (2007-08-02 (木) 22:30)

>kawagutiさん<br>これだけ短い日記なのに気がつきませんでした…。<br>個人的には span style="cursor: pointer" が好きじゃないので、潜在意識が出ちゃったのかもしれません。<br><br>>ハタさん<br>実験してみました。こういう書き方もあるんですねー。