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

我的窗口中有一个编辑器，其中包含一个包装iframe，然后再包含两个iframe，如元素中的HTML，通过write in JS插入，而不是像这样硬编码：

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

一个是编辑，另一个是预览。第一个包含我们称之为的这两个函数的函数父函数有一个eventListener for mousemove连接到它，但是没有任何函数被触发。例如，如果我添加5px边框，当我将鼠标移动到父对象的边框上时，事件将触发，但当我将鼠标悬停在包含编辑器或预览器的中间时，事件将不会触发。预览器显示为：编辑器可见时为无，反之亦然

下面的蓝色区域我可以移动鼠标，但其余的我不能。这很可能是因为堆叠顺序，但如何在整个帧上附加事件以激发？我需要mousemove，因为在mousemove上，我在右下角显示一个菜单。我希望相同的菜单显示编辑器或预览器是否可见

---

无论如何都没有必要这样做，因为事件被捕获在儿童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);
  });
}

很难看，但别无选择