title: Internet Explorer swallows events
body: <p>I got a div containing several clickable, draggable and resizable elements.
  I also want these movable elements to disappear behind a partially transparent (background-)image.
  It all works nicely on anything but Internet Exploder. </p>
  
  <p>my code (reduced to the bare minimum of what produces the problem) looks like this:</p>
  
  <pre><code>&lt;div id="container" style="z-index: 200; position: absolute"&gt;
      &lt;div style="position:absolute; width: 20px; height: 80px; background-color: red; opacity: .2"&gt;&lt;/div&gt;
      &lt;div id="works"&gt;not works&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I also created a fiddle here: <a href="http://jsfiddle.net/ZUfp5/11/" rel="nofollow">http://jsfiddle.net/ZUfp5/11/</a></p>
  
  <p>as you can see in the console, directly clicking the element will fire the handler but won't if you click at the overlay.</p>
  
  <p>shouldn't the event bubble??</p>
  
  <p>is there any way i can get this to work or does internet exploder yet again ruin it?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p><em>i edited the fiddle to make it work with firefox so the problem can be ovserved in its full scope</em></p>