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

Question

我有一个编辑器在我的 window 中包含一个包装 iframe，然后在内部包含另外 2 个 iframe(<iframe> 元素内的 HTML 是通过 JS 中的 write() 插入的，而不是像这样硬编码):

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

一个是编辑器，另一个是预览器。第一个包含这两个的(我们称之为 parent )有一个 eventListener for mousemove附加到它，但没有发射。如果我添加 5px border 例如，当我将鼠标移到 parent 的边框上时，事件将触发，但当我将鼠标悬停在包含编辑器 或 预览器的中间时(预览器为 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);
  });
}

很丑，但没办法。