HTML･CSS･JavaScript｜pointerEventsでイベントを無効化！！

pointerEventsの概要

特定要素がポインターイベントの対象になる可能性のある環境を設定する。

何かの処理中（時間を要する処理）にイベントの発生を止める。

例えばボタン要素をクリック出来ないようにしたりする。

CSSでの書き方

.target
{
    pointer-events: none;
}

targetクラスを持つ要素のイベントを無効化。

.target
{
    pointer-events: auto;
}

先程とは逆にtargetクラスを持つ要素のイベントを有効化。

デフォルトはautoになっているので、1度無効化した後に有効化する場合に使用することが多い。

JavaScriptでの書き方

let elm;

elm =   document.getElementById("id名");

elm.style.pointerEvents =   "none";

CSS同様でnoneで無効化、autoで有効化。