Internet Explorer 吞下事件

Posted 2023-03-06

【中文标题】Internet Explorer 吞下事件

【英文标题】：Internet Explorer swallows events

【发布时间】：2013-02-26 09:51:15

【问题描述】：

我得到了一个 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/

正如您在控制台中看到的那样，直接单击元素将触发处理程序，但如果单击覆盖则不会。

事件不应该冒泡吗？？

有什么办法可以让它工作，或者互联网爆炸器会再次破坏它吗？

更新：

我编辑了 fiddle 以使其与 firefox 一起使用，以便可以在其全部范围内观察问题

【问题讨论】：

你在 Safari（也可能是 IE）中的更新中断，因为括号后缺少 ;。这是一个固定的：jsfiddle.net/YBUtg

@insertusernamehere 除了 safari（这就是我养成这个习惯的原因 :) 之外的任何东西似乎都不是问题，但是谢谢。我更新了网址:)

【参考方案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 上显示它（而不是立即显示）。

【讨论】：

那一定是因为 pointer-events 来自 svg 规范。你有什么解决办法吗？ （可能除了pointer-events）。我想要的只是一个图像“悬停”在一些仍然接收事件的元素上。

不是真的.. 最简单的方法是将您的叠加层放在您的可拖动元素下并在它们上设置不透明度。我猜最终的结果看起来很相似。您可以通过在它们上设置position: relative 和z-index 来做到这一点。 （如insertusernamehere的回答

不幸的是，该方法也无济于事。 :( 不管怎样，我都给你们+1了。

我会接受你的回答，因为你提到的“非 SVG 元素”鼓励我尝试将覆盖图像实现为 ，这使得 pointer-events 完美工作在所有浏览器中。谢谢（因为它的价值：）

PS：忘记事件转发。我已经尝试过了，虽然它可能适用于一些元素，但如果您将多个事件转发给多个元素并在其他浏览器中无法忍受地滞后，它会让 internet explorer 抱怨“堆栈内存不足”。

【参考方案2】：

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

position: relative;

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

【讨论】：

在将其用于我的实际代码时，我无法确认这一点。甚至 CSS-pointer 规则似乎都不起作用。此外，draggables 不喜欢位置是相对的。