CSSのみで画面上のリンクやボタンのクリックを無効化する方法(javascriptでタグにstyle埋め込み)

画面にあるボタンのダブルクリックを制御するために、Javascriptでフラグを立てたりと様々な方法で実現している。
ここでは、cssのみでクリックを無効化する方法を記載する。

クリックを無効化するオプションを以下の通り。

クリック無効化オプション

pointer-events: none

上記の方法で指定されたものは一切クリックできなくなる。
上記オプションの利用参考例を以下に記載する。

クリック無効化オプションの使用例

window.addEventListener('click', function () {
  //bodyタグを取得
  var obj = document.querySelector("body");
  //bodyタグにクリックイベントを無効化するstyleを追加
  obj.setAttribute("style", "pointer-events: none;");
  //5秒後に追加したstyleを削除
  setTimeout(function () {
    obj.setAttribute("style", "")
  }, "5000");
};

上記Javascriptは、画面の何れかがクリックされたら画面全体をクリックできないようにしてしまうjavascriptです。
ただし、5秒後には指定したcssを削除するようになっている為、仮にサーバから返答がなくても操作を継続することが出来る。