Internet Explorer吞下事件

Question

我有一个div包含几个可点击,可拖动和可调整大小的元素.我还希望这些可移动元素消失在部分透明(背景)图像后面.除了Internet Exploder之外,这一切都很好用.

我的代码(减少到产生问题的最小值)看起来像这样:

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

我还在这里创建了一个小提琴:http://jsfiddle.net/ZUfp5/11/

正如您在控制台中看到的那样,直接单击该元素将触发处理程序,但如果您单击叠加层则不会.

不应该事件泡沫？

有什么方法可以让这个工作或互联网爆炸再次毁了它？

更新:

我编辑了小提琴,使其与firefox一起使用,因此问题可以在其全部范围内完成

Answer 1

问题不在于事件冒泡。问题是你的覆盖层隐藏了你的“无效层”。IE9 不支持非 SVG 元素的CSSpointer-events。

当事件到达#container事件目标时，不是#works，而是您的覆盖层，因此 jQuery 不会触发您的事件。

解决方案可以在这里描述： http ://www.vinylfox.com/forwarding-mouse-events-through-layers/

本质上，他将事件绑定到覆盖层，并通过以下方式处理它们：

1. “隐藏覆盖层”
2. 找到下面的元素
3. 将事件转发到下面的元素；

这是您的示例的分叉小提琴，它实现了这一点。 http://jsfiddle.net/QY69w/

如果您的事件例如“mousemove”等。也许有必要在 mousedown 上隐藏覆盖层并仅在 mouseup 上显示它（而不是立即显示）。