Question

我在iframe中有一个输入框。我在输入框上附加了keypress，input和focusout个事件侦听器，如下所示：

$("iframe").contents().find('#testDiv').on('keypress input focusout', 'input', function(event) {
  alert(event.type);
});

iframe内的输入框上都会触发keypress和input个事件。但是，focusout事件不会因输入框的模糊而被触发。

如果输入框未放在iframe中，则相同的语法和事件绑定可以正常工作。所有三个事件都在不在iframe内的输入框上被触发。

注意：我正在使用事件委派，因为iframe中的内容是动态的。

HTML标记：

<iframe>
  <body>
  </body>
</iframe>
<div id="testDiv1">
  <input type="text" />
</div>

Javascript代码：

var $iframe = $("iframe");
var iframe = $iframe[0];
var doc = iframe.document;
var content = '<div id="testDiv"><input type="text" /></div>';
if (iframe.contentDocument) {
  doc = iframe.contentDocument;
} else if (iframe.contentWindow) {
  doc = iframe.contentWindow.document;
}
doc.open();
doc.writeln(content);
doc.close();

$("iframe").contents().find('#testDiv').on('keypress input focusout', 'input', function(event) {
  alert(event.type);
});

$('#testDiv1').on('keypress input focusout', 'input', function(event) {
  alert(event.type);
});

以下是我尝试过的模型：JSFiddle Demo

请帮忙!!我无法从iframe移出输入框。

Answer 1

首先，关注焦点和焦点是由IE支持冒泡的两个事件。但是，jquery会为其他浏览器模拟此事件。

其次，只有受信任的目标才能用于事件委派（请参阅链接：https://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout）

即使将事件定位到输入（见下文），也只会触发模糊和焦点（在Chrome中测试）。

$("iframe").contents().find('#testDiv input').on('focusout focusin focus blur', function(event) {
  alert('lol: ' + event.type);
});

所以我想，对此没有直接的答案。您可能需要在iframe内容上添加一些JS，这些内容可以将此事件发送到父框架。

在iframe内的输入框中未触发FocusOut事件

1 个答案: