keijun5145回答ポイントなし

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

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

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

ログインして回答する

みんなの回答

danna_story2018/04/17 17:19:35

alertで良ければ。

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

スター
- 1件のコメントを見る
- danna_story 2018/04/17 17:23:37
  
  タグが使えないので上のが出来ない可能性はありますが、
  clickイベントに対してfalseで返せば遷移はキャンセルと思います。
  
  スター

a-kuma32018/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" が含まれているリンクのタグが、クリックされてもクリックがなかったことにしてしまうスタイルです。

スター

その他の回答を読む

この質問へのコメント

コメントはありません

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

質問の情報

登録日時: 2018-04-17 14:43:03
終了日時: 2018-04-24 14:45:05
回答条件: 1人5回まで

この質問のカテゴリ

ウェブ制作

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

みんなの回答

danna_story2018/04/17 17:19:35

danna_story 2018/04/17 17:23:37

a-kuma32018/04/18 15:17:44

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版