Mam wiele elementów SVG, które są w oddzielnych grupach. One nakładają się na siebie. Przykład:

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

Gdy kliknięta zostanie pozycja x, y, która pasuje do obu, chcę wiedzieć wszystko, co zostało kliknięte. Jeśli połączę każde zdarzenie „click”, wywoływane będą tylko procedury obsługi dla jednego na górze. Co jest rozsądne, choć nie to, czego tu chcę.

Zastanawiam się nad utworzeniem najwyższej warstwy i przechwyceniem wszystkich kliknięć, a następnie ustaleniem, które elementy z innych warstw powinny zostać zgłoszone. To dużo śledzenia, którego chciałbym uniknąć, jeśli to możliwe. Czy istnieją prostsze podejścia do tego?