title: Continue propagation
body: <p>I have some nested elements on my page with a same handler on them which should be called only for an event target without affecting elements higher in DOM tree. To achieve this behavior I used stopPropagation method and it was ok. Then I had to add some handlers for body and other elements outside the nested divs which should be called in any case. Of course stopPropagation isn't an option now but how can I make it work?</p>
  
  <p>Here is a sample:</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="nested1" class="nested"&gt;
          &lt;div id="nested2" class="nested"&gt;
              &lt;div id="nested3" class="nested"&gt;
                  &lt;div id="no-handler"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>#container {
      display: block;
      width: 398px;
      height: 398px;
      padding: 30px;
      border: solid 1px #888;
  }
  
  #nested1 {
      width: 336px;
      height: 336px;
      padding: 30px;
  }
  
  #nested2 {
      width: 274px;
      height: 274px;
      padding: 30px;
  }
  
  #nested3 {
      width: 212px;
      height: 212px;
      padding: 30px;
  }
  
  #no-handler {
      width: 150px;
      height: 150px;
      padding: 30px;
      border: solid 1px #888;
  }
  
  .nested {
      border: solid 1px #888;
  }
  
  .nested-clicked {
      background-color: red;
  }
  
  .outer-clicked {
      background-color: green;
  }
  </code></pre>
  
  <p><strong>js:</strong></p>
  
  <pre><code>var container = document.getElementById("container");
  var nested = document.getElementsByClassName("nested");
  
  function outerHandler(e) {
      this.classList.add("outer-clicked");
  }
  
  function nestedHandler(e) {
      e.stopPropagation();
      this.classList.add("nested-clicked");
  }
  
  container.addEventListener("click", outerHandler, false);
  document.body.addEventListener("click", outerHandler, false);
  for (var i = 0; i &lt; nested.length; i++) {
      nested[i].addEventListener("click", nestedHandler, false);
  }
  </code></pre>
  
  <p>jsfiddle link:
  <a href="http://jsfiddle.net/6kgnu7fr/" rel="nofollow">http://jsfiddle.net/6kgnu7fr/</a></p>
  
  <p>clicking on <code>.nested</code> should add red background color to clicked element and add green color to outer <code>body</code> and <code>#container</code></p>
  
  <p><strong>UPD:</strong></p>
  
  <p><a href="http://jsfiddle.net/6kgnu7fr/2/" rel="nofollow">http://jsfiddle.net/6kgnu7fr/2/</a></p>
  
  <p>clicking on <code>#no-event</code> or any other element inside <code>.nested</code> should also call nestedHandler for this <code>.nested</code> element.</p>