Question

I have an editor which is in my window that contains a wrapping iframe and then 2 more iframes inside like (the HTML inside the <iframe> element is inserted via write() in JS, not hardcoded like this):

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

One is an editor, the other is a previewer. The first one that contains the two (we’ll call this the parent) has an eventListener for mousemove attached to it, but nothing is firing. If i add a 5px border for example, the event will fire when I move my mouse on the border of the parent, but not when i hover over the middle which contains the editor or previewer (previewer is display:none while the editor is visible, and vice versa).

So, the blue area in the following i can mousemove, but the rest I can’t. It’s most likely because of the stacking order, but how can I attach an event to fire on the entire frame? I need mousemove because on mousemove I display a menu in the bottom right. I want the same menu to display whether or not the editor or the previewer is visible.

Answer 1

There isn’t anyway to do this because the event is caught in the children iframes. My “fix” was to manually set the same event to all the iframes like:

// 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);
  });
}

Very ugly, but no other way.