title: Prevent custom event from executing
body: <p>I want to prevent custom event on parent when child is clicked. Note that I don't have access to the code of parent event. I've tried doing <code>e.preventDefault()</code> on the button itself but it doesn't help.</p>
  
  <p>Is there any way of ignoring all parent events when something inside of it is clicked?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    // Note that this is just an example, I don't have access to this code
    // This is some custom event inside custom plugin
    $('.container').on('click', function() {
      alert('This should be alerted only if you click on green box');
    });
    
    $('.btn').on('click', function() {
      // Here I want to make sure that *parent* events are not triggered.
      alert('Button is triggered, green box should be not triggered');
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 300px;
    height: 200px;
    background: green;
    padding-top: 100px;
  }
  
  .btn {
    width: 100px;
    height: 100px;
    display: block;
    margin: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
    &lt;button class="btn"&gt;Click Me&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>