Question

我正在处理超越他人的图层以及发送事件的方法。调度事件有效但不会像按钮一样传播到内部元素。

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>

Answer 1

会发生什么事情会混淆元素的顺序。按照样式添加到#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是谁，在UpperLayer的幕后，是谁

这正是我们想要做的事情？

Javascript Dispatch鼠标事件不会传播给目标子项

1 个答案: