イベントの浸透をサポートしますか?ポインターイベントを使用する style_html/css_WEB-ITnose

要素 A が要素 B を完全に覆うように絶対配置された要素を使用する場合、要素 A は要素 B のイベントにどのように応答できますか?

上の図は以下のSVGコードで実現できます:

<svg width="200" height="180">    <rect x="50" y="50" width="50" height="50" fill="#f34b5b" onclick="alert('Clicked')"></rect>    <rect x="20" y="20" width="160" height="140" fill="#FEDDCE" opacity="0.8"></rect></svg>

最初のRectは2番目のRectによって完全に覆われているため、onclickイベントに応答できません。従来のソリューションでは、イベントの貫通を実現するために JavaScript コードを記述する必要があります。つまり、最初に 2 番目の Rect 要素の onclick イベントに応答し、座標値を使用してクリック位置が最初の Rect の範囲内にあるかどうかを判断します。要素を使用して、最初のrect要素のonclickイベントをトリガーするかどうかを決定します。ただし、グラフィックスとグラフィックスの関係が比較的複雑な場合、自分でコードを記述する作業負荷は膨大になり、コードの実行効率は高くありません。幸いなことに、この問題は CSS スタイルで解決できます:

pointer-events: none;

このスタイルを 2 番目のect 要素に追加することで、イベント貫通効果を簡単に実現できます。このスタイルは任意の DOM ノードに適用でき、すべての絶対配置要素に適用できます。すべての最新の主流ブラウザーはすでにこのスタイルをサポートしています (IE11 もテストおよびサポートされています)。