title: jQuery parent and child divs activating different actions
body: <p>I have an element that contains many components within it. Lets call this element box. Now inside the box I have many different elements, pictures, text and buttons.</p>
  
  <p>Example:
  <a href="http://jsfiddle.net/roman_khrystynych/FSCRH/" rel="nofollow">http://jsfiddle.net/roman_khrystynych/FSCRH/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="container"&gt;
          &lt;div class="box"&gt;
              &lt;div class="button"&gt;Click&lt;/div&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>    $('#container').on("click", ".box", function(){
          alert('box'); //only when anything in box except button
      });
  
      $('#container').on("click", ".button", function(){
          alert('button'); //only when button clicked
      });
  </code></pre>
  
  <p>Issue is that when clicking button the box element also activates its actions. Essentially I want it to be an exception that if I click on the button the regular box actions do no occur but instead the button actions occur. Any suggestions?</p>