Javascript調度鼠標事件不會傳播到目標兒童

我正在處理其他人的圖層和發送事件的方式。調度事件的作品，但不會傳播到像按鈕一樣的內部元素。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>

來源

2016-01-28 civiltomain

會發生什麼事是混淆的順序你的元素。加入#DownLayer以下樣式：

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 #UpperLayer內，因此你永遠不能點擊在上面。

此外DownLayer是誰在前面和後面上層是誰

這正是我們想要做什麼？

來源

2016-01-28 15:24:09 dexhering

NO。我想派發的事件可以到達按鈕，但它不會傳播....它停止在容器div級別.... – civiltomain

Javascript調度鼠標事件不會傳播到目標兒童

回答

相關問題