Ich habe mehrere SVG-Elemente, die sich in separaten Gruppen befinden. Sie überlappen sich. Beispiel:

<svg id="board" width="100%" height="80%">
   <g id="terrain" class="layer">
     <path d="M-32,-32L32,-32 32,32 -32,32Z" transform="translate(0, 0)" class="mote terrain hill"></path>
   </g>
   <g id="guy" class="layer">
     <path d="M-21...Z" transform="translate(192, 448)" class="mote guy"></path>
   </g>
</svg>

Wenn eine x, y-Position angeklickt wird, die beiden entspricht, möchte ich wissen, dass beide angeklickt wurden. Wenn ich jedes Ereignis an das Ereignis "click" binde, werden nur die Ereignishandler für das Ereignis "on top" aufgerufen. Welches ist vernünftig, obwohl nicht, was ich hier will.

Ich denke darüber nach, eine oberste Ebene zu erstellen und alle Klicks aufzufangen, und dann herauszufinden, welche Elemente in den anderen Ebenen benachrichtigt werden sollten. Das ist viel Nachverfolgung, die ich nach Möglichkeit vermeiden möchte. Gibt es einfachere Ansätze dafür?