在 iFrame 外部单击时触发焦点元素上的模糊答案

【问题标题】：Trigger blur on focused element, on click outside of iFrame在 iFrame 外部单击时触发焦点元素上的模糊
【发布时间】：2023-03-27 11:55:01
【问题描述】：

我有一个包含 iframe 的页面。 iframe 内部是一个 contenteditable 部分，它保存 onblur 事件。只要 onblur 事件发生在 iframe 内（单击同一 iframe 内的另一个区域），此方法就可以正常工作。

但是，如果用户在 iframe 区域（父）之外单击，则模糊事件永远不会在 iframe（子）内触发，因此数据不会保存。

如何在 iframe 中触发 onblur 事件，即使在父级 iframe 之外单击也是如此？

我能找到的所有答案都涉及相反的情况，即在 iframe 内单击以触发父级中的事件。我该如何做相反的事情？

【问题讨论】：

你能复制问题吗？因为如果其中的特定元素被聚焦，则单击父页面应触发 iframe 内的任何模糊事件。顺便说一句，你在每个浏览器上测试它吗？是跨域iframe吗？
@A.Wolff 好的，那么它可能特定于我的情况。我的应用程序加载在另一个系统窗口中（在 iframe 本身中），因此我的应用程序加载在 iframe 中，其中我有自己的 iframe ..两者都在同一个域中。我将检查我所在的父框架（在我的控制之外）是否正在取消默认模糊事件。

【解决方案1】：

所以问题是模糊事件没有传递给我的编辑器。在带有编辑器的 iFrame 中添加以下代码，使其按预期工作：

$("[contenteditable='true']").blur(function(e) {
  editor1.trigger('blur', e, $(e.target));
})

【讨论】：