title: JS - Stop function above current function
body: <p>I have a jQuery click event which adds a class (<code>active</code>) to a <code>dropdown</code>.
  In the <code>dropdown</code> there are boxes (with the class generically called <code>box</code>).</p>
  
  <p>Currently the jQuery event fires anytime you click anywhere in the <code>item</code> class, but if you click the <code>box</code> it also closes the dropdown. Thus I am adding an if statement above the <code>addClass</code> part which checks if you clicked a <code>box</code>.</p>
  
  <p>Here's the html:</p>
  
  <pre><code>  &lt;div class="trainee-item"&gt;
      &lt;div class="dropdown"&gt;
        &lt;div class="box"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>and here's the JS: </p>
  
  <pre><code>$('.item').click(function(e) {
    $('.box').click(function() {
      console.log('stop!!!');
    });
  
    if ($(this).children('.dropdown').hasClass('active')) {
      $(this).children('.dropdown').removeClass('active');
      return;
    }
    $(this).children('.dropdown').addClass('active');
  });
  </code></pre>
  
  <p>I've tried <code>return</code> (where the <code>console.log('stop!!!!');</code> currently is, but that only stops the <code>$('.box').click(function()</code> (the immediate "parent" function). <strong>I am trying to stop the function above that one</strong></p>
  
  <p>Any help? thanks</p>