title: stopPropagation() stops propagation at wrong side
body: <p>I ran into a problem while trying to create a non-click-through div.</p>
  
  <p>Yes, its stops propagation, but stops what should not be stopped and doesn't stop what should be stopped</p>
  
  <p><strong>js</strong></p>
  
  <pre><code>//screen has set stopPropagation
  
  $("#smokeScreen").click(function(){
     event.stopPropagation();
  })
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;!-- lots of stuff that has to not be clickable while "smokeScreen is visible" --&gt;
      &lt;!-- lots of stuff that has to not be clickable while "smokeScreen is visible" --&gt;
      &lt;div id="smokeScreen"&gt;
          &lt;!-- covers whole viewport --&gt;
  
          &lt;div id="form"&gt;&lt;!-- another form stuff here --&gt;&lt;/div&gt;
          &lt;!-- covers whole viewport --&gt;
      &lt;/div&gt;
  
      &lt;!-- lots of stuff that has to not be clickable while "smokeScreen is visible" --&gt;
      &lt;!-- lots of stuff that has to not be clickable while "smokeScreen is visible" --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Funny thing is, that this code makes everything clickable, except the form...</p>
  
  <p>So please, any tip?</p>
  
  <p>And pointer-events:none; in css is not a solution, for some reason, it doesn't work as simple css, and I have not figured why yet, but I need to keep compatibility with older browser and this is very new statement.</p>