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调度鼠标事件不会传播到目标儿童

回答

相关问题