Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Internet Explorer swallows events

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

like image 331
Gung Foo Avatar asked Mar 11 '13 09:03

Gung Foo


2 Answers

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).

like image 194
Roman Avatar answered Sep 28 '22 02:09

Roman


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.

like image 28
insertusernamehere Avatar answered Sep 28 '22 04:09

insertusernamehere