HTMLでaタグにjavascriptのonclick属性なんかをつけたいときは、まあこんな書き方になると思う。
<a href="#">test</a>
このとき、return falseをつけておかないと、リンクをクリックしてアラートが出た後に、アンカーの移動(で合ってる?)みたいなのが行われてしまう。URLの最後に#がつく感じですね。
ここを#にしないでjavascript:void(0)と書くと、return falseがなくても大丈夫なのかな……自分で確かめた限りでは大丈夫だったけど、参考文献をいくつかあさった限りでは、javascript:void(0)でも完全なリンクの無効にはならないっぽいことも書いてあった。まあどっちの場合でもreturn falseを書いとけばまず間違いはないだろうと思われます。
僕も基本的には常にreturn falseを書いてます。まあ僕の場合は、return falseの意味をちゃんと理解してたわけじゃなくて、初めてjavascriptを触ったときに、とりあえず後ろにはreturn falseをつけるのが常識なんだろうみたいな印象を持って以降、今でもそのままの流れでとりあえずつけとけばいいやって思って書いてる感じですけど。
でもそんな覚え方だと、やっぱり落とし穴の一つや二つにははまるわけですね。
この前、ラジオボタンにonchange属性をつける仕様があったんですけど、当然のようにreturn falseをつけて書いてたら、チェックの変更が起きなくなってしまったんですね。
だいぶ適当に書きましたけど、例えばこんな感じのラジオボタンがあったとして、最初にラジオ1の方を選択してそっちにチェックがついたら、何度ラジオ2の方のボタンを押してもチェックはラジオ1の方についたままになってたんですよ。何か言葉だけで説明するとややこしいっすかね……すんません。
ちなみに、function test()はちゃんと呼ばれます。だからthis.valueをアラートしてみると、ちゃんと選択された方の値は取得できるんですよ。でもチェックの移動はしない。function内で無理やりチェックを変えるとかも試みてみたんですけど、ダメでした。僕の書き方に問題があった可能性はここでは無視することにして、とりあえずダメでした。しつこいようですが、ダメでした。
ダメでした。
で、その原因がreturn falseでした。こいつを外したら、正常な動きをするようになった。
何かねぇ……ラジオボタンにonchangeって、なかなかの曲者っぽい感じがします。Firefoxではちゃんと動くのにIEだとちゃんと動かなかったりとか。っていうか、IE6だとちゃんと動かなかったりとか。
この前もね、先方さんから「何かラジオボタンのとこが上手く動かないんだけど」みたいなこと言われて、こっちでいろいろチェックしてみたんですけど、どこにも不具合が見つからなくて、まさかと思ってIE6でテストしてみたら、まさにズバリだったさ。
くそっ、IE6め。IE6めぇぇぇぇ!!
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。