Присоединение события к Iframe, который содержит больше iframe

Question

У меня есть редактор, который находится в моем window, который содержит переносящий iframe, а затем еще 2 iframes внутри подобно (HTML-код внутри элемента <iframe> вставляется через write() в JS, а не жестко кодируется следующим образом):

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

Один из них является редактором, другой - средством предварительного просмотра. Первый, который содержит два (мы назовем это parent), имеет прикрепленный к нему EventListener для mousemove, но ничего не запускается. Например, если я добавлю границу 5px, событие произойдет, когда я наведу указатель мыши на границу parent, но не при наведении курсора на середину, в которой находится редактор или previewer ( Предварительный просмотр display:none, в то время как редактор виден, и наоборот).

Итак, синюю область в следующем я могу mousemove, а остальное я не могу. Скорее всего, из-за порядка наложения, но как я могу прикрепить событие, чтобы выстрелить по всему кадру? Мне нужно mousemove, потому что на mousemove я отображаю меню в правом нижнем углу. Я хочу, чтобы одно и то же меню отображало, видим ли редактор или средство предварительного просмотра.

Answer 1

Нет никакого способа сделать это, потому что событие попадает в детские рамки.Мое "исправление" заключалось в том, чтобы вручную установить одно и то же событие для всех 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);
  });
}

Очень некрасиво, но никак иначе.