javascript - 重なっている要素にマウスイベントを登録する

Question

私の svg 画像では、多くのパス (およびその他の要素) を描画しますが、その一部は部分的に透明で、互いに重なり合う可能性があります。

最上位の要素だけでなく、すべての要素のリスナーがクリックなどのマウスイベントを受け取るようにするにはどうすればよいですか。

基本的な例 (A、B、C の座標とサイズが同じであると仮定):

<g id="parent">
  <rect id="A" .../>
  <rect id="B" .../>
  <rect id="C" .../>
</g>

この例では、望ましい結果は、長方形 C (一番上) のクリックが、A、B、C のリスナーによって登録されることです。

Googleを使用して、リスナーを親に登録し、影響を受ける子要素をチェックすることで、自分でイベントをディスパッチできることを学びましたが、より良い解決策やライブラリがあるかどうか疑問に思っています.

score 1 · Accepted Answer

jquery++ を使用すると、要素が他の要素の背後にある場合でも、特定の位置にある要素を見つけることができます。次のような簡単なことを行うことができます。

$("#parent").on("click",function(ev){
    $(this).children().within(ev.offsetX,ev.offsetY)...; //filter the elements
});

javascript - 重なっている要素にマウス イベントを登録する