將事件附加到包含更多內聯框架的iframe

Question

我有一個編輯器位於我的window中，其中包含一個包裝iframe，然後是2個內嵌iframe（元素中的HTML通過write()插入到JS中，而不是硬編碼像這樣）：

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

一個是編輯器，另一個是預覽器。第一個包含兩個（我們稱之爲parent）有一個附加到它的事件偵聽器mousemove，但沒有任何觸發。例如，如果我添加一個5px邊框，例如，當我將鼠標移動到parent的邊框上時，該事件將會觸發，但不是當我將鼠標懸停在包含編輯器或預覽器的中間時（預覽器爲display:none，而編輯器可見，反之亦然）。

所以，在下面的藍色區域我可以mousemove，但其餘的我不能。這很可能是因爲堆疊順序的原因，但是如何將一個事件附加到整個框架上？我需要mousemove，因爲mousemove我在右下角顯示一個菜單。我想要顯示相同的菜單，不管編輯器或預覽器是否可見。

Answer 1

沒有反正，因爲該事件的兒童患上了I幀做到這一點。我的「修復」是同一事件手動設置爲像所有的I幀：

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

非常難看，但沒有別的辦法。