我一直在從事需要將 OnClick 上的資料顯示為 Popover 的專案。在用戶單擊它包含在多個標簽內的地方，我的 On click 正在處理我正在提供要單擊的 id 的標簽，但它不適用于其中的其他標簽。我希望你能從我的代碼中明白我的意思。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="share.css">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<img src="mainBodyPic.png" alt="Cinque Terre" width="100%" height="620px">
<div class="mainContainerElement">
<div class="mainContainerShare">
<div id="popover-content-share">
<div id="closeButton">X</div>
<div>Data here</div>
</div>
<div id="showOnClick" class="shareMainBodyIcon">
when i click this then onClick works
<p>This is not working</p>
<div>This is also not working</div>
</div>
</div>
</div>
<script>
var button = document.getElementById('showOnClick');
button.onclick = function() {
var div = document.getElementById('popover-content-share');
if (div.style.display !== 'none') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
};
var button1 = document.getElementById('closeButton');
button1.onclick = function() {
var div = document.getElementById('popover-content-share');
if (div.style.display !== 'none') {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
};
window.onload = function() {
var hideMe = document.getElementById('popover-content-share');
document.onclick = function(e) {
if (e.target.id !== 'popover-content-share' && e.target.id !== 'showOnClick') {
hideMe.style.display = 'none';
}
};
};
</script>
</body>
</html>uj5u.com熱心網友回復：
您想添加一個事件偵聽器并指定單擊事件。看起來像這樣：
button.addEventListener("click", event => {
// Your function goes here
});
uj5u.com熱心網友回復：
有很多方法可以解決這個問題，一種方法是使 showOnClick 元素的 z-index 高于內部元素，另一種方法是通過 css 道具使 div 中的元素 showOnClick 沒有可點擊
例子：
#showOnClick p div {
pointer-events: none;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/419456.html
標籤：