title: Prevent certain event listeners from firing for an event but allow the parent listeners to fire
body: <p>Is there any way to prevent some of the listeners in an event's chain from firing for an event but allow others farther up the chain to fire?</p>
  
  <p>For instance i have this structure</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="1"&gt;
         &lt;div id="2"&gt;
            &lt;button&gt;Click Me&lt;/button&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p>Lets say i have click event listeners attached to body, div#1, and div#2.  Would it be possible at div#2 event listener to prevent the event making it to div#1 or any other listeners in between and allow the event to fire on the body element?  </p>
  
  <p>I say this because i am using google maps and emberjs to build a bunch of interactive infoboxes that can be shown on a map. The problem is that ember attaches event listeners on the body element and google attaches them at some other unknown level. When a click event is fired by emberjs HTML nodes hosted inside a google maps overlay the event must first pass through google maps handlers before it reaches ember's. </p>
  
  <p>This is causing some unintended side effects like google maps thinking i'm clicking on other markers.  IE. this issue. <a href="https://stackoverflow.com/questions/17044854/mousing-over-infobox-fires-hover-event-on-markers-that-are-behind-it">Mousing over Infobox fires hover event on markers that are behind it</a> </p>