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

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

如您在控制台中所见，直接单击该元素将触发处理程序，但如果您单击叠加层则不会。

事件不应该冒泡吗？？

有什么方法可以让它正常工作，或者 internet exploder 再次毁掉它吗？

更新:

我编辑了 fiddle 以使其与 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/

本质上，他将事件绑定(bind)到叠加层，并通过以下方式处理它们:

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

这是您的示例的 fork fiddle ，它实现了它。 http://jsfiddle.net/QY69w/

如果您的事件是“mousemove”等，也许有必要在 mousedown 上隐藏叠加层并仅在 mouseup 上显示(而不是在 mouseup 后立即显示)。