title: event handlers of elements inside label getting executed even after using stopPropagation
body: <p>I have few elements(like input, paragraph, radiobutton any element) embeded inside label. The parent of this label is div tag.
  Applied event handlers for all the elements inside label and for parent div except the label tag. Applied stopPropagation also in all the event handlers. But when I click on any of the element inside label then respective event handler is being called and since stopPropagation is there, it is restricting parent event handler to be called. Till here it is fine. But the issue is it is also calling the event handlers of its siblings. </p>
  
  <pre><code> &lt;div class="scroll-content-item" data-pid="1773"&gt;
        &lt;label&gt;   
           &lt;span class="custom"&gt;Custom&lt;/span&gt;
           &lt;input type="text" class="text custom_width" id="cust_width" value="960"/&gt; 
           &lt;p class="para"&gt; This is test para&lt;/p&gt;
        &lt;/label&gt;
    &lt;/div&gt; 
  </code></pre>
  
  <h2>jQuery code</h2>
  
  <pre><code>jQuery(document).ready(function($) {
  
      $('.para').click(function(event) {
          alert("paragraph event ");
          event.stopPropagation();
      });
  
      $('.custom_width').click(function(event) {
  
          alert("input custom width event ");
          event.stopPropagation();
      });
  
  
  
      $('.scroll-content-item').click(function(event) {
          alert("parent div event ");
          event.stopPropagation();
      });
  
  });​
  </code></pre>
  
  <p>When I click on paragraph, its event handler and handler of input type is also getting called. When I click on span with class custom, since it doesn't have event handler, parent is getting called first and later input type handler is getting called.</p>
  
  <p>The question you may ask like what is the purpose of embedding p, input and all those inside label. We are using custom <code>input type="file"</code>  we are overlaying label data on input type file, but <code>onclick</code> on label input type file has to be triggered. For the same I am embedding elements inside label</p>
  
  <p>Just want to know why the two event handlers are getting called even though I am using <code>stopPropagation</code>.</p>
  
  <p>For reference I created jsfiddle : <a href="http://jsfiddle.net/x7xQg/29/" rel="noreferrer">http://jsfiddle.net/x7xQg/29/</a></p>
  
  <p>Thanks in advance</p>