pointer-events_html/css_WEB-ITnose

pointer-events 属性は、特定の状況でグラフィック要素をイベント ターゲットとして指定するために使用されます。

これは SVG プロパティであり、CSS 仕様では定義されていないことに注意してください。

SVG 要素に適用できる pointer-events 属性には多くの値がありますが、HTML 要素に適用できる値は 3 つだけです。

ポインター イベントを HTML 要素に適用すると、要素がマウス (タッチ) イベントに応答できるかどうかを指定するために使用できます。これは、クリック、状態 (CSS アクティブ、フォーカス、ホバー状態)、およびカーソル イベント (例: リンク上でのポインター カーソルの表示) を防ぐために使用できます。

要素をポインター イベントに応答させることもできます ( auto)、または応答をブロックします (なし)。要素がポインター イベントに応答しないようにすると、その要素の子である要素がそれらのイベントのターゲットになります。要素をクリックすると、その子要素がクリック イベントを受け取ります。ホバー操作やその他のカーソル操作にも同じことが当てはまります。たとえば、pointer-events:none を使用すると、要素の子要素内のテキストを取得できます (以下の例を参照)。

pointer-events 属性は、さまざまなシナリオで非常に役立ちます。このプロパティの優れた利点は、pointer-events:none を使用して 60fps スクロールを作成できることです。 Ryan Seddon がその仕組みについて記事を書きましたので、読む価値があります。

Notes

要素上のポインターを無効にするイベントは、子要素によってオーバーライドできます。要素の子要素に pointer-events:auto がある場合、子要素はクリックを処理して応答できます。親要素にこの機能がない場合でも、イベントが発生します。

上で述べたように、pointer-events 属性は SVG 属性です。レベル 3 ユーザー インターフェイス モジュールの以前のドラフトには存在していましたが、そのモジュールから削除され、レベル 4 に追加されました。さらに詳しく知りたい場合は、ここをクリックしてください。

公式構文

構文

pointer-events: visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | none | inherit

公式構文の値は SVG 要素に適用され、次の 3 つの値のみが HTML 要素に適用されます。 🎜>

pointer-events: auto | none | inherit

• 初期値: auto
• 適用先 : すべての要素
• アニメーション: なし

値

• auto : デフォルト値。ポインタイベントを使用することができます。要素はポインター イベントに応答し、要素の子要素がそれに応答するのを防ぎます。
• なし : 要素上のポインター イベントは無効になります。要素はポインター イベントに応答しません。要素の子は、その要素が存在しないかのようにポインタ イベントに応答します。
• 継承 : 要素は親から pointer-events の値を継承します。

備考

残りの値の詳細については、SVG 仕様を参照してください。

例

次の例では、ページ全体にオーバーレイ要素を配置します。ユーザーが一部の Javascript メソッドなどの特定の操作をページ上で実行すると、オーバーレイがビューにフェードインします。ページ上の他の要素のポインター イベントと重複しないようにするために、その子要素のイベントをキャンセルできます。

.overlay {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    opacity: 0;    /* ... */    pointer-events: none;}

このように、JavaScript を使用すると、要素がビューにフェードインし、イベントが有効になり、ユーザーが要素を操作できるようになります。

オンライン例

以下の例では、属性値 pointer-events:none がオーバーライドされているため、その下のアンカー タグをクリックしてテキストを取得できます。リンクの上にマウスを置くと、カーソルがポインター (手) に変わることに注目してください。その理由は、ホバー状態がトリガーされるためです。

none 値を auto に変更して、オーバーレイがリンク状態のトリガーやその他のイベントのトリガーをどのように防ぐかを観察してください。