JavaScriptで無反応のリンクを作成したい


Webページの制作をaspxでしております。
※htmlは使用不可になっています。
現在あるページの見た目を極力変えずに動作のみ変更したいと思います。
変更したい内容は以下の通りです。
 前提:テーブルの中にいくつかの項目があり、内容がないものに対しては未作成のため工事中というリンク先に遷移するようにしている(htmlでデフォルトになっている文字色が青で下線が出ている状況)
 理想:下線が表示されて文字色も青になっているが、その文字をクリックしても何も反応しない(未作成のためお問い合わせください。のようなメッセージボックスが出ればさらに良い)

上記のことはJavaScriptで実現可能でしょうか?
可能であればどのようにコーディングすれば良いかご教示ください。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2018/04/17 14:43:03
  • 終了:2018/04/24 14:45:05

回答(2件)

id:danna_story No.1

danna_story回答回数2ベストアンサー獲得回数02018/04/17 17:19:35

alertで良ければ。

<a href="http://www.google.co.jp" onClick="alert('未作成です');return false;">リンク</>

id:danna_story

タグが使えないので上のが出来ない可能性はありますが、
clickイベントに対してfalseで返せば遷移はキャンセルと思います。

2018/04/17 17:23:37
id:a-kuma3 No.2

a-kuma3回答回数4727ベストアンサー獲得回数20252018/04/18 15:17:44

例えば、こんなふうに書けます。

window.addEventListener("DOMContentLoaded", ev => {
    document.querySelectorAll('a[href*="under_construction"]').forEach(a => {
        a.addEventListener("click", ev => {
            alert("未作成のため、お問い合わせください");
            ev.preventDefault();
        });
    });
});

ページの読み込みが完了したときに、リンク先の URL に "under_construction" が含まれているリンクのタグに、クリックしたときのデフォルトの動作(その URL に移動する)を無効にします。

ただ、リンクのタグに別の javascript が結びついている場合、その処理が動いてしまいます。
例えば、クリックしたときに何かしらの処理をしてから、javascript でページを移動するようにしている場合には、ページが移動してしまいます。

それも無効にしたい場合には、もうひと手間かけて、以下のようなコードにします。

window.addEventListener("DOMContentLoaded", ev => {
    document.querySelectorAll('a[href*="under_construction"]').forEach(a => {
        const inner = document.createElement("span");
        inner.innerHTML = a.innerHTML;
        a.innerHTML = "";
        a.appendChild(inner);
        inner.addEventListener("click", ev => {
            alert("未作成のため、お問い合わせください");
            ev.stopPropagation();
            ev.preventDefault();
        });
    });
});


ちなみに、メッセージを出さなくても良いのであれば、CSS だけでも実現できます。

a[href*="under_construction"] {
    pointer-events: none;
}

リンク先の URL に "under_construction" が含まれているリンクのタグが、クリックされてもクリックがなかったことにしてしまうスタイルです。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません