title: How can I map click events to elements in multiple layers?
body: <p>I have multiple SVG elements that are in separate groups. They overlap each other. Example:</p>
  
  <pre><code>&lt;svg id="board" width="100%" height="80%"&gt;
     &lt;g id="terrain" class="layer"&gt;
       &lt;path d="M-32,-32L32,-32 32,32 -32,32Z" transform="translate(0, 0)" class="mote terrain hill"&gt;&lt;/path&gt;
     &lt;/g&gt;
     &lt;g id="guy" class="layer"&gt;
       &lt;path d="M-21...Z" transform="translate(192, 448)" class="mote guy"&gt;&lt;/path&gt;
     &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>When an x, y position that matches both is clicked, I want to know all that both were clicked. If I bind each to the 'click' event, only the event handlers for one on top gets called. Which is reasonable, although not what I want here.</p>
  
  <p>I'm thinking of creating a topmost layer and having that catch all clicks, then figure out which elements in the other layers should be notified. That's a lot of tracking that I'd like to avoid, if possible. Are there simpler approaches to this?</p>