将事件附加到包含更多iframe的Iframe

Question

我的window内有一个编辑器，其中包含一个包装iframe，然后内部有两个iframe（<iframe>元素中的HTML通过write()插入JS中，不像这样硬编码）：

<iframe class="parent">
  <div class="wrapper">
    <iframe class="editor"></iframe>
    <iframe class="previewer"></iframe>
  </div>
</iframe>

一个是编辑器，另一个是预览器。包含两者的第一个（我们称之为parent）有一个附加到它的mousemove的eventListener，但没有任何东西被触发。例如，如果我添加5px边框，当我在parent的边框上移动鼠标时会触发该事件，但是当我将鼠标悬停在包含编辑器或< / em>预览器（预览器为display:none，而编辑器可见，反之亦然）。

所以，下面的蓝色区域我可以mousemove，但其余的我不能。这很可能是因为堆叠顺序，但是如何在整个框架上附加事件？我需要mousemove，因为在mousemove我会在右下方显示一个菜单。我想要相同的菜单来显示编辑器或预览器是否可见。

Answer 1

无论如何都没有这样做，因为事件是在儿童iframe中捕获的。我的“修复”是手动将相同的事件设置为所有iframe，如：

// Hide and show the util bar based on mouse movements
eventableIframes = [self.previewerIframeDocument, self.editorIframeDocument];

for (i = 0; i < eventableIframes.length; i++) {
  eventableIframes[i].addEventListener('mousemove', function (e) {
    utilBarHandler(e);
  });
  eventableIframes[i].addEventListener('scroll', function (e) {
    utilBarHandler(e);
  });
  eventableIframes[i].addEventListener('keyup', function (e) {
    shortcutUpHandler(e);
  });
  eventableIframes[i].addEventListener('keydown', function (e) {
    shortcutHandler(e);
  });
}

非常难看，但别无其他。