Javascript调度鼠标事件不会传播到目标子级

我正在研究超越其他层的层，以及发送事件的方法。 分派事件可以工作，但不会像按钮一样传播到内部元素

jsfiddle显示了这个问题

我有一个图层，里面有另外两个绝对定位的图层。我想将事件从最上面显示的层发送到最后一个“兄弟”层。正如您在日志中看到的，它可以工作，但事件传播无法到达该按钮

似乎此事件不会像正常事件那样传播

也许我做不到我想要的

 <div id="top" style="width: 100%; height:100%;">                 
    <div id="UpperLayer2" style="width: 100%; height:100%;border: 1px solid green; margin: 50px; position: absolute;top: 0;left: 0;">
        <input type="button" value="> > >" onclick="show()">
    </div>
    <div id="DownLayer" style="width: 100%; height:100%;border: 1px solid blue;margin: 0px;position: absolute; top: 0;left: 0px;">
        <input type="button" value="button at down layer" onclick="show()">
    </div>                        
</div>


<script>
    function show () {alert("yes");}

    document.getElementById("top")
        .addEventListener("mousedown", rise_event_to_upper, true);    
    document.getElementById("UpperLayer2")
        .addEventListener("click", doSomethingUpper2, true);
    document.getElementById("DownLayer")
        .addEventListener("click", doSomethingDown, true);

    function rise_event_to_upper(e) {
        console.log("define & dispatch: "+e.eventPhase);
        var evt = new MouseEvent("click", {
            bubbles: false,
            cancelable: true,
            view: window,
        });
        document.getElementById("UpperLayer2").dispatchEvent(evt);      
    }
    function doSomethingDown(e) {  
        console.log ("capture down: "+e.eventPhase);
    }
    function doSomethingUpper(e) {                 
        console.log ("capture upper: "+e.eventPhase);
    }
    function doSomethingUpper2(e) {                 
        console.log ("capture upper2: "+e.eventPhase);    }

</script>    

函数show（）{alert（“yes”）；}
document.getElementById（“顶部”）
.addEventListener（“鼠标向下”，上升到上方，为真）；
document.getElementById（“上层2”）
.addEventListener（“单击”，doSomethingUpper 2，true）；
document.getElementById（“底层”）
.addEventListener（“单击”，doSomethingDown，true）；
功能上升\u事件\u至\u上限（e）{
console.log（“定义和分派：+e.eventPhase”）；
var evt=new MouseEvent（“单击”{
泡泡：错，
可取消：对，
视图：窗口，
});
document.getElementById（“上层2”）.dispatchEvent（evt）；
}
函数doSomethingDown（e）{
console.log（“捕获时间：+e.eventPhase”）；
}
函数doSomethingUpper（e）{
console.log（“捕获上限：+e.eventPhase”）；
}
函数doSomethingUpper2（e）{
console.log（“捕获上限2:+e.eventPhase）；}

发生的事情是混淆了元素的顺序。 添加到#底层以下样式：

background-color: blue;

你应该看起来像：

<div id="DownLayer" style="width: 100%; height:100%;border: 1px solid blue;margin: 0px;position: absolute; top: 0;left: 0px; background-color: blue;">
    <input type="button" value="button at down layer" onclick="show()">
</div>  

正如您所看到的，您无法看到位于div#上层的按钮，因此您永远无法单击它

此外，下层是谁在前面，上层是谁在后面

---

这正是我们想要做的吗？

否。我希望调度的事件可以到达按钮，但不会传播。。。。它在container div的级别停止。。。。