こんにちは。ikuraです。
最近、寒くなってきたので１日に１１時間も布団にもぐってしまうようになってしまいました。（夏は８時間程度）
寒いのが好きではないので早く４月にならないかと思っております
余談はさておき、仕事でJavaScriptを触る機会がありましてオンライン画面のリンクを無効化する処理を書きました。
ネットで「JavaScript aタグリンク無効化」と調べると色々実装方法が出てきたのですが、動的にリンクを無効化する処理がネット上にあまりなかったため記事を書こうと思い立ちました。
#pointerEventsの概要
私はaタグリンクを無効化するのに、「pointerEvents」を使いました。
poiterEventsの詳しい内容は、以下のリンクをご参照ください。
Pointer events - Web API | MDN
pointer-eventsの本当の意味 - Qiita
「pointer-events」は、基本的にcssのプロパティとして使用されているためJavaScriptではあまり使われないようです。。
#pointerEventsの実装方法
1.「getElementsByTagName('a')」でタグ名"a"を取得する。
2.取得したaタグの件数文for分を回す。
3.「.style.pointerEvents = 'none';」でaタグ要素を無効化する。
という流れになります。
aタグ要素を有効化する場合は、「auto」を使用します。
index.html
<html lang="en">
<head>
<script src="a_index.js"></script>
</head>
<body>
<a href="https://qiita.com/">Qiitaへ１</a>
<a href="https://qiita.com/">Qiitaへ２</a>
<a href="https://qiita.com/">Qiitaへ３</a>
<a href="https://qiita.com/">Qiitaへ４</a>
<a href="https://qiita.com/">Qiitaへ５</a>
<input type="button" value="ここ押すとリンクが無効化される" onclick="invalidLink()">
</body>
</html>
a_index.js
function invalidLink() {
let elements = document.getElementsByTagName('a');
for (let i = 0; i < elements.length; i++) {
elements[i].style.pointerEvents = 'none';
}
}