人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: keijun5145
●カテゴリ:ウェブ制作
○ 状態 :回答受付中
└ 回答数 : 2/2件

▽最新の回答へ

1 ● danna_story

alertで良ければ。

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


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

2 ● a-kuma3

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

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ