6

我有一个 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一起使用，因此可以在其全部范围内解决问题

4

2 回答 2

3

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

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

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

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

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

这是实现该示例的分叉小提琴。 http://jsfiddle.net/QY69w/

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

于 2013-03-11T09:40:12.987 回答
2

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

position: relative;

上<div id="works">。仅在 IE9 中测试过。

于 2013-03-11T09:47:33.533 回答