title: Parent click events overlaps children click events
body: <p>I want to be able to click the parent div, but have the child form and anchor elements be exempt from the click event.</p>
  
  <pre><code>&lt;div class="root"&gt;
  
      &lt;div class="parent"&gt;
          &lt;div class="container"&gt;
              &lt;a href="/blah"&gt; Hello World&lt;/a&gt;
              &lt;div&gt;
                  &lt;span&gt; Hello World Again
              &lt;/div&gt;
              &lt;form class="form"&gt;
                  &lt;label&gt; inputs
                  &lt;input id="text" type="text"/&gt;
                  &lt;textarea&gt;&lt;/textarea&gt;
                  &lt;input id="submit" type="submit"/&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(".parent").on("click", ".container", function() {
      alert("Parent clicked");
  });
  
  $(".parent").on("click", "#text", function(event) {
      event.preventDefault();
      alert("Form Input clicked");
  });
  
  $(".parent").on("click", "#submit", function(event) {
      event.preventDefault();
      alert("Form Button clicked");
  });
  
   $(".parent").on("click", "a", function(event) {
      event.preventDefault();
      alert("anchor link clicked");
  });   
  </code></pre>
  
  <p>Clicking on any of the form elements (input, textarea, button submit) or the anchor tag won't work because the parent click event is firing.</p>
  
  <p>How can I make the parent click event only on elements outside of the child form and anchor tag? The parent click event can cover any of the other children except those two elements.</p>