У меня есть несколько элементов SVG, которые находятся в отдельных группах. Они перекрывают друг друга. Пример:

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

Когда щелкается позиция x, y, совпадающая с обоими, я хочу знать все, что были нажаты оба. Если я свяжу каждое из них с событием 'click', будут вызваны только обработчики событий для одного сверху. Что разумно, хотя и не то, что я хочу здесь.

Я подумываю о создании самого верхнего слоя, который будет ловить все клики, а затем выяснить, какие элементы в других слоях должны быть уведомлены. Это много слежения, которого я бы хотел избежать, если это возможно. Есть ли более простые подходы к этому?