Attacher un événement à un Iframe qui contient plus d'iframes

Question

J'ai un éditeur qui est dans mon window qui contient un iframe enveloppant et ensuite 2 autres iframes à l'intérieur comme (le HTML à l'intérieur de l'élément est inséré via write() dans JS, pas codé en dur comme ceci):

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

L'un est un éditeur, l'autre est un prévisualisateur. Le premier qui contient les deux (nous appellerons cela le parent) a un eventListener pour mousemove attaché, mais rien ne se déclenche. Si j'ajoute une bordure 5px par exemple, l'événement se déclenchera lorsque je déplacerai ma souris sur la bordure du parent, mais pas lorsque je survolerai le milieu qui contient l'éditeur ou previewer (l'aperçu est display:none tant que l'éditeur est visible , et vice versa). Donc, la zone bleue dans la suite je peux mousemove, mais le reste je ne peux pas. C'est probablement dû à l'ordre d'empilement, mais comment puis-je attacher un événement sur l'ensemble du cadre? J'ai besoin de mousemove parce que sur mousemove j'affiche un menu en bas à droite. Je veux que le même menu affiche si l'éditeur ou le visualiseur est visible ou non.

Answer 1

Il n'y a pas de toute façon de le faire parce que l'événement est pris dans les enfants iframes. Mon « fix » était de régler manuellement le même événement à tous les iframes comme:

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

Très laid, mais pas d'autre moyen.