STEP.2 OKかキャンセルか判別する
それでは、「クリックされたボタンの判別」を行いましょう。
方法はとても簡単で、わずか4文字を加えるだけです。
onClick="if( confirm('リンク先は...') )"
conform関数の前後に「 if( ) 」という文字を加えるだけです。
この if を使用すると、( ) の中身が「真の場合」(=成立する場合)に、その後に続く指示(※)が実行されることになります。
※「続く指示」の部分は、上記ソースではまだ書いていません。
if の中に、確認ダイアログを表示する confirm 関数を記述しています。
この場合、「OKがクリックされたら真」「キャンセルがクリックされたら偽」となりますので、これで、ユーザがどちらのボタンをクリックしたのかが分かります。
■移動する指示は書かない。書くのは「移動しない指示」
さて、「OKがクリックされた場合にリンク先へ移動する」わけですから、この後には、「リンク先へ移動する」指示をJavaScriptで記述するのだろう……と思うかも知れません。
でも違います。
リンク先へ移動するスクリプトは記述する必要がありません。
「JavaScriptが無効だった場合には無条件で移動する」ということからもお分かり頂けると思いますが、a要素のhref属性に移動先URLを記述しているので、「何もしなければ移動する」のです。
ですから、ここでJavaScriptを使って記述する必要があるのは、「キャンセルがクリックされたときに移動させなくするスクリプト」です。
STEP.3 リンク先への移動を抑止
キャンセルが選択された場合には、リンク先へ移動してしまうのを止めないといけません。それを実現するには、次のように記述します。
return false;
以前から記事を読んで下さっている方々は、見覚えがあるかも知れませんね。 記事「サブウインドウを開く弊害と対策」で使用した方法と同じです。
この記述を実行すれば、本来実行されるはずだった処理を抑止することができます。 ここでは、リンク先への移動という処理を抑止できるわけです。
具体的な記述
さて、3つの処理内容の説明は終わりです。
次に、これらをまとめて、実際に稼働するようにしてみましょう。