クリック可能なオーバーレイを作成し、ボタンをクリックしてもクリックします

私はクリック可能なボタンを持っています。私は、クリック可能なオーバーレイを動的に配置したい。オーバーレイが一番上にあり、クリックされたら、オーバーレイonclickがトリガーされ、ボタンがクリックされてトリガーされるようにします。クリック可能なオーバーレイを作成し、ボタンをクリックしてもクリックします

今は、onclickハンドラでオーバーレイを上に置くと、クリックが下のボタンに移動しません。オーバーレイでpointerEvents = "none"を使用すると、クリックは通過しますが、オーバーレイ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/

出典

2016-07-31 techdog

それは簡単ですが、ボタンのz-index触れ、および-1にオーバーレイz-indexを設定していない

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/

出典

2016-07-31 03:19:16

あなたの変更された例では少なくともfirefoxでオーバーレイはボタンの背後にあり、ボタンのクリックだけがトリガされます。私はまた、トリガーするためにオーバーレイのクリックを取得しようとしていた。 – techdog

@techdogボタンをクリックしたときにオーバーレイを有効にしたい –

クリック可能なオーバーレイを作成し、ボタンをクリックしてもクリックします

答えて

関連する問題