title: How do I prevent a parent's onclick event from firing when a child anchor is clicked?
body: <p>I'm currently using jQuery to make a div clickable and in this div I also have anchors. The problem I'm running into is that when I click on an anchor both click events are firing (for the div and the anchor). How do I prevent the div's onclick event from firing when an anchor is clicked?</p>
  <p>Here's the broken code:</p>
  <p><strong>JavaScript</strong></p>
  <pre><code>var url = $(&quot;#clickable a&quot;).attr(&quot;href&quot;);
  
  $(&quot;#clickable&quot;).click(function() {
      window.location = url;
      return true;
  })
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div id=&quot;clickable&quot;&gt;
      &lt;!-- Other content. --&gt;
      &lt;a href=&quot;http://foo.example&quot;&gt;I don't want #clickable to handle this click event.&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>