Como posso mapear eventos de clique para elementos em várias camadas?
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?