調度鼠標事件到iframe窗口？

Question

我有兩個兄弟divs（絕對定位）。

 
    ________________ 
    |    | 
    | BACK DIV | 
    |  _________|_____ 
    |  |    | 
    |  | FRONT DIV | 
    |_____|    | 
      |    | 
      |_____________| 

經過一番努力，我設法將事件從一個div調度到其他div。

var backDiv = document.getElementById('back'); 
var frontDiv = document.getElementById('front'); 
var logger = document.getElementById('logger'); 

backDiv.addEventListener('mousedown', function(e) { 
    logger.innerHTML += 'back<br />'; 
}); 

frontDiv.addEventListener('mousedown',function(e) { 
    logger.innerHTML += 'front<br />'; 

    var e1 = document.createEvent('MouseEvent'); 
    e1.initMouseEvent(e.type, e.bubbles, e.cancelable, e.view, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, null); 

    console.log(backDiv.contentWindow) 
    backDiv.contentWindow.document.body.dispatchEvent(e1); 
}, true); 

這是code。

後，我把一個iframe在背部和DIV在前面，

 
    ________________ 
    |    | 
    | BACK IFRAME | 
    |  _________|_____ 
    |  |    | 
    |  | FRONT DIV | 
    |_____|    | 
      |    | 
      |_____________| 

我想從正面DIV調度鼠標事件到iframe中。 我該如何做到這一點？

Answer 1

嘗試添加父元素（說的#container）到IFRAME，然後：

var event = document.createEvent('Event'); 
event.initEvent('CustomEvent', true, true); 
event.targetFrame = "myTargetFrame"; 
element = parent.document.getElementById('container'); 
element.dispatchEvent(event); 

記得要聽父文檔

parent.document.addEventListener('CustomEvent', function(e) { 
    if(e.targetFrame == "myTargetFrame") { 
     // codes here 
    } 
}); 

在觸發的事件因爲你選中目標框架，在多幀觸發的事件中不會有任何衝突