Tailwind CSS 練習問題 52：イベント制御
Tailwind CSSにおいて、要素に対するマウスクリックやホバーなどのポインターイベントを無効化したい場合、正しいものはどれか。
- 要素に対するマウスクリックなどの操作を完全に無効化するクラスは「pointer-events-none」である。
- 要素に対するマウスクリックなどの操作を完全に無効化するクラスは「cursor-not-allowed」である。
- 要素に対するマウスクリックなどの操作を完全に無効化するクラスは「touch-action-none」である。
- 要素に対するマウスクリックなどの操作を完全に無効化するクラスは「select-none-all」である。
- 要素に対するマウスクリックなどの操作を完全に無効化するクラスは「event-action-null」である。
正解と解説を見る
正解：要素に対するマウスクリックなどの操作を完全に無効化するクラスは「pointer-events-none」である。
クリックやホバーといったポインターイベントを無効化したい場合は「pointer-events-none」を設定するのが正解です。
【正解の理由】
「pointer-events-none」を指定すると、CSSの「pointer-events: none;」が適用され、その要素に対するマウスクリックなどの操作が一切反応しなくなります。
【不正解の理由】
• 「cursor-not-allowed」はマウスカーソルの形状を「禁止（赤い斜線など）」に変更するだけで、イベント自体は無効化されないため誤り
• 「touch-action-none」はスマートフォンなどのタッチ操作時のブラウザのデフォルト挙動（スクロールなど）を防ぐものであり、クリックイベント全体を無効化するわけではないため誤り
• 「select-none-all」はTailwind CSSに存在しないクラス名であるため誤り
• 「event-action-null」はTailwind CSSに存在しないクラス名であるため誤り