使用MouseEvent构造函数

Question

如果我有嵌套的div并单击最里面的div，则事件会一直向上传播。如果我发送“手动”创建的MouseEvent，它将不会传播：

但是，如果我“保存”当用鼠标单击时实际调度的MouseEvent，然后调度此事件，它将传播。

所以我想我需要在MouseEvent上设置一些属性以使其传播。这可能吗？

下面的代码演示了这个问题：

HTML

<div id='div1'>
    #div1
    <div id='div2'>
        #div2
        <div id='div3'>
            #div3
        </div>
    </div>
</div>

的Javascript

var mostRecentEvent;
function handler(e) { 
    console.log(e); 
    mostRecentEvent=e;
};

var divs = document.querySelectorAll('div');
for (var i=0; i<divs.length; i++) {
    divs[i].addEventListener('click', handler);
};

// Will not propagate
var homeBakedMouseEvent = new MouseEvent('click');
document.querySelector('#div3').dispatchEvent(homeBakedMouseEvent);

// Will propagate 
// But can only be run after actually clicking with mouse. 
// So run this line from console
// document.querySelector('#div3').dispatchEvent(mostRecentEvent);