Question

我有一个可点击的按钮。我想在它上面动态地叠加一个也可以点击的叠加层。当叠加层位于顶部并单击时，我希望触发叠加层触发，并触发按钮点击。

现在，如果我使用onclick处理程序将叠加层放在顶部，则单击不会转到下面的按钮。如果我使用pointerEvents =＆＃34; none＆＃34;在叠加层上然后点击进入但不会触发叠加点击。

当叠加层位于顶部时，如何同时触发两个onclicks？

<html><body>

   <input type=button value=clickme style="position:absolute;top:50px;left:25px;z-index:-1" onclick="alert('button')" >
    </body></html>

    <script>


    function createDiv(){
        alert("creating div");
        divTag = document.createElement("div"); 
        divTag.id="overlay";
        document.body.appendChild(divTag); 
        divTag.setAttribute("onclick","alert('overlay')");
         divTag.style.backgroundColor="rgba(255, 255, 0, 0.5)";
         divTag.style.top="0px";
         divTag.style.left="0px";
         divTag.style.width="100px";
         divTag.style.height="100px";
         divTag.style.zIndex=100;
         //divTag.style.pointerEvents="none";
         //divTag.style.pointerEvents="auto";

    }
    setTimeout(createDiv,2000);
    </script>

https://jsfiddle.net/q6Levpds/

Answer 1

这很简单，请勿触摸z-index按钮，并将覆盖z-index设置为-1

JS:

function createDiv(){
    alert("creating div");
   divTag = document.createElement("div"); 
   divTag.id="overlay";
     document.body.appendChild(divTag); 
     divTag.setAttribute("onclick","alert('overlay')");
     divTag.style.backgroundColor="rgba(255, 255, 0, 0.5)";
     divTag.style.top="0px";
     divTag.style.left="0px";
     divTag.style.width="100px";
     divTag.style.height="100px";
     divTag.style.zIndex=-1;
     //divTag.style.pointerEvents="none";
     //divTag.style.pointerEvents="auto";

}
setTimeout(createDiv,2000);

HTML：

<body>
<input type=button value="clickme" style="position:absolute;top:50px;left:25px" onclick="alert('button')" />
</body>

https://jsfiddle.net/q6Levpds/1/

创建可点击的叠加层，然后点击进入按钮

1 个答案: