创建可点击的叠加层并点击按钮也可以通过答案

【问题标题】：create clickable overlay and have click go through to button also创建可点击的叠加层并点击按钮也可以通过
【发布时间】：2016-07-31 11:19:16
【问题描述】：

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

现在，如果我使用 onclick 处理程序将叠加层放在顶部，则单击不会到达下方的按钮。如果我在叠加层上使用 pointerEvents="none" 则点击通过但不会触发叠加层 onclick。

当叠加层位于顶部时，如何让两个 onclick 都触发？

<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/

【问题讨论】：

标签： button onclick overlay

【解决方案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/

【讨论】：

在您更改的示例中，至少在 Firefox 上，覆盖层位于按钮后面，并且仅触发按钮单击。我试图让覆盖点击也触发。
@techdog 你想在点击按钮时激活覆盖点击