リンクをクリックさせる前にJavaScript:confirmで確認する時の注意

JavaScriptによるダイアログでユーザーの同意を得てリンク先に移動させるようなページを作成する場合にうっかり見落としがちなポイントを挙げておきたいと思います。

やりたいこと

• 「child.html」から「adult.html」にリンクで移動させたい。
• 18歳以上であるかどうかをJavaScriptのダイアログで確認する。
• 18歳以上に同意してもらえれば「adult.html」に移動させる。

危ない例

まず、危ない例を書きます。　どこがおかしいか分かりますか？

<noscript>JavaScriptをオンにしてください。　正常に動作しない場合があります。</noscript>
<a href="adult.html" onclick="return confirm('あなたは18歳以上ですか？');">18歳以上の方はこちら</a>

JavaScriptがOffにしてあったらどうなるの？

この例ではJavaScriptがOffにしてある場合が想定されていません。

JavaScriptをオフにすると「onclick=…」の部分が動きませんので、単なるリンクになってしまい、リンク先に移動してしまいます。　これではまずい。

キーボードでフォーカスしてEnterしたらどうなるの？

残念ながらこの場合も動作してしまいます。　防ぐには「onkeypress」属性にも同じ処理を指定するか、onkeypress属性ではfalseを返すようにしましょう。

<a href="adult.html" onkeypress="return false;" ... >

この例は、<noscript>タグで警告はしてあるものの、しくみでは動作するようになっているので、クレームが来てしまうと対応に苦労します。　くれぐれもこういう書き方はしないようにしましょうね。

安全な例

次に安全な例を書きます。

<noscript>JavaScriptをオンにしてください。　正常に動作しない場合があります。</noscript>
<a href="javascript:void(0);" onclick="var ok=confirm('あなたは18歳以上ですか？');
if (ok) location.href='adult.html'; return false;">18歳以上の方はこちら</a>

JavaScriptがオフの場合はリンクそのものが動作しない

こちらの例はリンク先にJavaScriptの「location.href」を利用しているので、JavaScriptがオフの場合は動作しません。

また、フォーカスによるEnter操作の場合も「href=”javascript:void(0);”」の箇所が動作するだけなので「adult.html」には遷移しません。

ちなみに、最後の「return false;」の部分はInternet Explorer （IE）対策で、最後にfalseを返さないとリンクが動作しない仕様になっているためです。

シンプルな処理でも落とし穴が隠されているので注意