Take the 2-minute tour ×

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>

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.


share|improve this question

1 Answer 1

up vote 0 down vote accepted

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) {
  eventableIframes[i].addEventListener('scroll', function (e) {
  eventableIframes[i].addEventListener('keyup', function (e) {
  eventableIframes[i].addEventListener('keydown', function (e) {

Very ugly, but no other way.

share|improve this answer

Your Answer


