调度鼠标事件到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 
    } 
}); 

在触发的事件因为你选中目标框架，在多帧触发的事件中不会有任何冲突