单击子 iFrame 时 IE 未触发 (window|document).onclick 事件答案

【问题标题】：IE not firing (window|document).onclick event when clicking on a child iFrame单击子 iFrame 时 IE 未触发 (window|document).onclick 事件
【发布时间】：2009-12-10 16:54:16
【问题描述】：

我有一个简单的下拉菜单，只要您点击页面上的任意位置（而不是菜单上），我就想隐藏它。这在 FF 和 IE 中运行良好，直到您将 iFrame 添加到页面中。单击 iFrame 时，菜单不会隐藏在 IE 中。在 FireFox 中运行良好。

我尝试使用 document.onclick 和 window.onclick。

有什么想法吗？

编辑：我宁愿不必向 iframe 添加任何内容。该页面是动态的，在创建菜单后可以加载不同的 iframe。必须不断地观察新的 iFrame 并将事件附加到它们上，这将是一件麻烦事/不可取的事情。是的，我知道 jQuery.live，但我们不使用 jQuery。

我认为这种行为是可能的，因为它适用于 FireFox，我只是觉得我可能只是将侦听器附加到错误的事件类型或错误的元素。

【问题讨论】：

标签： javascript internet-explorer iframe

【解决方案1】：

在父页面，您可以在页面中搜索 iFrame 并为其添加 onfocus 事件。当用户在框架内单击时，将触发该事件。

【讨论】：

我宁愿不必向 iframe 添加任何内容。查看问题的编辑。
不，我的意思是尝试将此事件添加到父页面的 DOM 中的 iframe 元素。
我决定在显示菜单时在页面中搜索 iFrame，并为它们添加焦点事件侦听器。谢谢！
是的，应该。您是否遇到特定浏览器/版本的问题？

【解决方案2】：

另一种方法是让下拉菜单在鼠标或焦点停留在设置的一段时间后消失，而不是需要单击才能将其关闭。

【讨论】：

好主意，但仍然不是我想要的功能。谢谢，最终可能会成为一种解决方法。

【解决方案3】：

click 事件会冒泡到所有者 window 并且不会再进一步。如果您希望父 window 了解点击另一个框架内的内容，您必须在其 window/document 上捕获事件（或让子文档捕获点击并通知其父文档）。是的，这会很麻烦，而且 jQuery live 无论如何都不会工作，因为它依赖于事件冒泡。

替代方法：当您打开下拉菜单时，还要在其后面打开一个透明的“阴影”div（但在页面上所有其他内容的前面，包括 iframe），然后点击阴影以关闭下拉菜单。

【讨论】：

这确实有一个缺点，即为该点击禁用页面中的其他 UI 元素。
我的意思是使用类似 $('iframe').live("click", handler) 的东西来攻击所有未来的 onclick 处理程序。另一个好主意，但如果菜单打开，我将无法一键激活页面上的其他链接/按钮。第一次单击将在垫片上，并且需要再次单击才能点击实际的链接/按钮。用户可能会感到困惑，为什么他们（有时）必须在链接上单击两次。
不过，这不一定是坏事：浏览器小部件（如 select 框中的下拉菜单）已经具有这种行为。