pointer-events: noneが要素の無効化だと誤解しているケースが多い

pointer-events: noneは要素の無効化ではない

Webサイトを見ていると、特定の要素に対してCSSの「pointer-events: none」を使用しているケースが現在も見受けられます。

「pointer-events」の「ポインター」とは「マウス・タッチ・ペン入力」などのポインティングデバイスを指すので、キーボードは含まれません。

そのため、以下のように特定の要素に「pointer-events: none」を指定しても、キーボードのタブキーでフォーカスされてしまいます。

試しに以下のボタンをクリックしてみてください。

HTML

<button class="sample" onclick="alert('Hello')">
  サンプルのボタン
</button>

CSS

.sample {
  pointer-events: none;
}

クリックしても反応しませんが、キーボードのタブキーを使用すればフォーカスされ、フォーカス時にEnterキーを押すとイベントが発火することが確認できます。

さらにドラッグしてテキスト部分を選択することもできてしまいます。

要素の無効化はinert属性を使用するのが適切です。

inertを使用すればキーボードのタブキーでフォーカスされずに無効化できます。

HTML

<button class="sample" onclick="alert('Hello')" inert>
  サンプルのボタン
</button>

JavaScriptでinertを切り替える場合は、属性の値としてbooleanを設定してください。

JavaScript

const element = document.querySelector('.sample')
element.inert = true // or false

console.log(element.inert) // true