実現の仕組み
リンク先への移動前に確認ダイアログを表示させるためには、次の3つの処理が必要です。
- 確認ダイアログを表示
- OKがクリックされたらリンク先へ移動
- キャンセルがクリックされたら移動を抑止
これらの仕組みをHTMLだけで用意するのは無理ですので、JavaScriptを活用します。難しく感じるかも知れませんが、全然そんなことはありません。実現はかなり簡単です。
※解説を読むのが面倒で、とにかく使ってみたい方は、最終ページだけを読んで頂いても問題ありません。コピー＆ペーストで実現できますから。（リンク先URLと表示メッセージは書き換える必要がありますが。）
STEP.1 確認ダイアログを表示する
「OK」と「キャンセル」の2つのボタンがあるダイアログをJavaScriptで表示するには、「 confirm 」という関数を使います。
confirm('リンク先はPDFです。移動しますか？');
これで、「リンク先はPDFです。移動しますか？」と表示され、「OK」ボタンと「キャンセル」ボタンのあるダイアログを作れます。
リンクがクリックされたときに表示させたいのですから、リンクを作る a要素内の、onClick属性にこのコードを記述します。例えば、下記のように記述します。
<a href="xxx" onClick="confirm('リンク先は...');">
このソースを表示すると、「クリックすると確認ダイアログが表示されるリンク」が出来上がります。（下記）
※注意：下記のリンクは、クリックするとOKを押してもキャンセルを押しても、ダミーページに移動します。（理由は後述） クリックしたら、「戻る」ボタンで戻ってきて下さい。
これでは不十分ですね。
上記のままでは、「OK」をクリックした場合はもちろん「キャンセル」をクリックしてもリンク先へ移動してしまいます。 これは当然ですね。どちらのボタンがクリックされたのかを、まだ何も判別していないのですから。
※どちらのボタンを押してもリンク先へ移動するのは、a要素の href属性にリンク先を記述してあるからです。 実は、「JavaScriptで表示したダイアログ」と「リンク先へ移動する」という動作には、まったく関係がありません。 どちらをクリックしても移動するのは、そのためです。（この点について次のページで説明しています。）
※JavaScriptでどう記述しようがリンク先へ移動するということは、つまり、JavaScriptが無効になっている場合でもリンク先へ移動できるということになります。
STEP.2 OKかキャンセルか判別する
そこで、次のステップ、「クリックされたボタンの判別」が必要になります。
