最近のブラウザにはpointer-events
というCSSプロパティがあり、可能な値はnone
です。この値により、JavaScriptリスナーも、イベント(:hover
、:active
など)によって発生したCSS疑似クラスも影響を与えません。
私にとって、これは無効化された要素に適用することには意味があります。ただし、これは、無効化された要素がnot-allowed
のような別のカーソルを持つことはないことを意味します。
無効化された要素には、ポインターイベントが含まれる必要がありますか?または、無効化された要素に役立つポインターイベント(ホバー上のカーソルの変更など)はありますか?
UXの観点からは、pointer-eventsをnoneに設定しないことでユーザーエクスペリエンスを支援するために実行できることがいくつかあります。障害者のフィールドを人に見せることは、時には残酷です。フィールドが無効になる理由のルールが複雑で、画面レイアウトから明らかでない場合、それは、システムを使用しようとしている人の手の届かないところにニンジンを置くようなものです。無効なフィールドのフィールドレベルのヘルプを実際にオンにして、フィールドを有効にするために実行する必要があることを通知するデスクトップアプリをいくつか見ました。
許可されていないカーソルは、ドラッグアンドドロップUIを使用するドロップターゲット用でない限り、おそらくあまり役に立ちません。
無効なボタンではpointer-events:none;
を使用しません。
手動でカーソルとホバー効果をデフォルト/無効状態に設定することをお勧めします。
無効なボタンにツールチップを追加すると便利な場合があります。 pointer-events noneはこれを無効にします。
興味があれば、以下のpointer-events:none;
の使用例を追加しました。
ポインタイベントの使用例
通常は、適用先の要素の背後にある要素との相互作用を可能にするために使用されます。
これは最近pointer-events:none;
を使用した例です。
虫眼鏡のアイコンはハイパーリンク画像の上にあり、アイコンにpointer-events:none;
を付けていません。ユーザーがアイコンをクリックしてもリンクは表示されません。