Internet Explorer swallows events

Question

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.

my code (reduced to the bare minimum of what produces the problem) looks like this:

<div id="container" style="z-index: 200; position: absolute">
    <div style="position:absolute; width: 20px; height: 80px; background-color: red; opacity: .2"></div>
    <div id="works">not works</div>
</div>

I also created a fiddle here: http://jsfiddle.net/ZUfp5/11/

as you can see in the console, directly clicking the element will fire the handler but won't if you click at the overlay.

shouldn't the event bubble??

is there any way i can get this to work or does internet exploder yet again ruin it?

UPDATE:

i edited the fiddle to make it work with firefox so the problem can be ovserved in its full scope

Answer 1

The problem is not event bubbling. The problem is that your overlay hides your "not works layer". CSS pointer-events for non SVG elements is not supported in IE9.

When the event reaches #container the event target is not #works, but your overlay and therefore jQuery does not fire your event.

A solution could be described here: http://www.vinylfox.com/forwarding-mouse-events-through-layers/

Essentially he binds the events to the overlay, and handles them by:

1. "hide the overlay"
2. find what element is beneath
3. forward the event to the element beneath;

here is a forked fiddle of your example which implements that. http://jsfiddle.net/QY69w/

If your events are such as "mousemove", etc. Maybe it could be necessary to hide your overlay on mousedown and show it only on mouseup (instead of immediately after).

Answer 2

Roman's answer is right - +1. You can get the expected behavior by using:

position: relative;

on the <div id="works">. Tested it in IE9 only.