Geek Answers Handbook

Internet Explorer swallows events

I have a div containing several clickable, draggable and resizable elements. I also want these moving elements to disappear behind a partially transparent (background) image. All of this works great on anything but Internet Exploder.

my code (minimized to the point of causing the problem) is as follows:

<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 on the console, clicking on an element will start the handler, but it will not if you click on the overlay.

shouldn't an event bubble ??

Is there a way I can get this to work, or is Internet explorer crashing again?

UPDATE:

I edited the script to work with firefox, so the problem can be saved in full

+6
source share
2 answers

The problem is not the event bubbles. The problem is that your overlay hides your “not working” layer. CSS pointer-events for non-SVG elements are not supported in IE9 .

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

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

Essentially, it associates events with an overlay and processes them:

  • hide overlay
  • find which item below
  • pass the event to the element below;

here is the forked violin of your example that implements this. http://jsfiddle.net/QY69w/

If your events are like "mousemove" etc. Maybe you may need to hide your overlay on mousedown and show it only on mouseup (instead of right after).

+3
source

Roman answer is +1. You can get the expected behavior using:

 position: relative;

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

+2
source

More articles:


All Articles