Eu tenho vários elementos SVG que estão em grupos separados. Eles se sobrepõem. Exemplo:

<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>

Quando uma posição x, y que corresponde a ambas é clicada, quero saber tudo o que ambas foram clicadas. Se eu ligar cada um ao evento 'click', somente os manipuladores de eventos de um em cima serão chamados. O que é razoável, embora não seja o que eu quero aqui.

Eu estou pensando em criar uma camada superior e ter que pegar todos os cliques, em seguida, descobrir quais elementos nas outras camadas devem ser notificados. Isso é um monte de rastreamento que eu gostaria de evitar, se possível. Existem abordagens mais simples para isso?