Internet Explorer会吞噬事件

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/

可以看到在控制台中,直接点击元素会触发处理程序,但是在叠加层上单击不会。

事件不应该冒泡吗?

有没有办法让它工作,还是Internet Explorer再次搞砸了?

更新:

我编辑了示例,使其与Firefox兼容,以便完整地观察问题。


1
您的更新后的 JSFiddle 在 Safari(以及可能是 IE)中出现问题,因为括号后缺少了一个分号;。这里提供一个已修复的版本:http://jsfiddle.net/YBUtg/。 - insertusernamehere
@insertusernamehere 在除了 Safari 以外的任何地方似乎都没有问题(这就是我养成这个习惯的原因 :),但还是谢谢。我已经更新了 URL :) - Gung Foo
2个回答

3
问题不在于事件冒泡。问题在于您的覆盖层隐藏了您的“不起作用的层”。CSS非SVG元素的pointer-events在IE9中不受支持
当事件到达#container时,事件目标不是#works,而是您的覆盖层,因此jQuery不会触发您的事件。
一个解决方案可以在这里描述: http://www.vinylfox.com/forwarding-mouse-events-through-layers/ 本质上,他将事件绑定到覆盖层,并通过以下方式处理它们:
  1. “隐藏覆盖层”
  2. 找到下面的元素
  3. 将事件转发到下面的元素;
这是您的示例的分支fiddle,实现了该功能。 http://jsfiddle.net/QY69w/ 如果您的事件是"mousemove"等,也许需要在mousedown时隐藏覆盖层,并仅在mouseup后显示它(而不是立即显示)。

这可能是因为pointer-events来自svg规范。你有没有看到任何解决方案?(除了pointer-events之外)。我想要的只是一个图像“悬停”在一些仍然接收事件的元素上。 - Gung Foo
不是很好实现...最简单的方法是将覆盖层放在可拖动元素下面,并对它们设置不透明度。最终结果看起来应该差不多。您可以通过设置 position: relativez-index 来实现这一点(就像 insertusernamehere 的回答所示)。 - Roman
不幸的是,那种方法也无济于事。:( 无论如何,我都为你们两个点了赞。 - Gung Foo
我会接受你的答案,因为你提到“非SVG元素”鼓励我尝试将覆盖图像实现为<svg><image></svg>,这使得pointer-events在所有浏览器中都能完美工作。谢谢(不管值不值钱 :) - Gung Foo
PS:忘记事件转发吧。我已经尝试过了,虽然对于一些元素可能有效,但如果将多个事件转发到多个元素,它会导致Internet Explorer报告“堆栈中内存不足”,并在其他浏览器中无法忍受的延迟。 - Gung Foo
IE8对于穴居人来说还行,实际上整个IE都是这样,但没关系...再次感谢你们的时间和努力。 - Gung Foo

2

Roman的回答是正确的 - +1。您可以通过使用以下方法获得所需的行为:

position: relative;

<div id="works"> 上进行测试。仅在IE9中进行了测试。


我无法确认这一点,当将其应用到我的实际代码时。甚至CSS的“pointer”规则似乎也不起作用。此外,可拖动元素不喜欢相对位置。 - Gung Foo

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接