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

问题不在于事件冒泡。问题是你的叠加层隐藏了“非工作层”。 CSS pointer-events for non SVG elements is not supported in IE9。

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

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

基本上，他将事件绑定到叠加层，并通过以下方式处理它们：

“隐藏叠加层”
找到下面的元素
将事件转发到下面的元素;

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

如果你的事件是“mousemove”等等，也许有必要在mousedown上隐藏你的叠加层，并且只在mouseup上显示它（而不是在之后立即显示）。

Answer 2

Roman的答案是对的 - +1。您可以使用以下方法获得预期的行为：

position: relative;

<{1>}上的

。仅在IE9中测试过。

Internet Explorer吞下事件

2 个答案: