HTMLのinert属性を使えば要素を不活性状態にできる

HTMLのinert属性とは

要素に対するユーザーのクリックなどの入力イベントを無効化にする不活性状態にできる属性です。

ちなみにinert (イナート)は不活性という意味です。

日本人だと見慣れない単語なので、よく見るinsertと間違えないよう注意が必要です。

入力イベントの無効化というとdisabled属性やCSSのpointer-events: none; がよく利用されますが、disabled属性の場合は適用可能なHTMLタグがinputやbuttonなどに限定されます。

inertの場合はどのようなHTMLタグでも適用可能です。

また、pointer-events: none; の場合は要素がポインターイベントの対象になることはありませんが、子要素や要素内のテキストは選択などができてしまいます。

例えば以下のボタンはpointer-events: none; が適用されているため、ボタンをクリックしてもalertが表示されません。

しかし、ボタンの中身のテキストは選択できてしまいます。

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

.sample {
  pointer-events: none;
}

inert属性の場合はボタンがクリック不可になっているのに加え、内部のテキストも選択不可になります。

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

inert属性だとHTMLタグに属性が付くのでpointer-eventsと違って、HTMLコードから適用されていることが確認しやすいというメリットもあります。

IE11ではinertは使用不可だったのでpointer-eventsが使われることが多かったのですが、IE11はサポートが終了しているので、特に理由がなければpointer-eventsではなくinert属性を使用したほうが良いでしょう。

JavaScriptでinert属性を有効および無効にする場合はelement.inertに true か false を入れるだけで実装できます。

また、element.inert で true または false を返します。

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

console.log(element.inert) // true

特定の要素を不活性にしたいことは多いので、この属性を覚えておけば簡単に実装できるようになります。

便利な半面、間違えて付けると要素が不活性状態になってしまうため、追加する際は間違えて関係のない箇所に追加しないよう注意が必要です。

以下のように[inert] { outline: 2px solid red; } で視覚化すると適用されている要素が確認しやすくなります。

[inert] {
  outline: 2px solid red;
}