ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

PDFへのリンクに便利。リンク移動前に確認させる方法(3ページ目)

特定のリンクをクリックして移動する前に、移動して良いかどうか確認ダイアログを表示させてみましょう。HTMLファイルへのリンクだと勘違いして、PDFやDOCへのリンクをクリックしてしまうことを防ぐのに良いかも。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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つの処理内容の説明は終わりです。
次に、これらをまとめて、実際に稼働するようにしてみましょう。

それでは、次のページへ →

  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 5
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます