如何將 javascript onclick 事件偵聽器添加到容器 div？

Question

將 onclick 事件偵聽器添加到容器 div。

我嘗試了以下操作，如您所見，該事件似乎未注冊。 如何將偵聽器添加到此 div？

我想要的 div id 是“engineersContainer”。

 document.getElementById("engineersContainer").addEventListener("click", function(e) { console.log("It was clicked"); alert("It was clicked"); });

 .barContainer { margin: 2px; border: 2px solid black; border-radius: 20px; width: 200px; //width:-moz-fit-content; //width: fit-content; padding: 5px; overflow: hidden; position: relative; background: #34e8eb; z-index: -1; } .containerHeader:before { content:""; background: skyblue; position: absolute; inset: 0; z-index: -1; height:45px }

 <div id="engineersContainer" class="barContainer"> <div id="engineerList" class="containerHeader" style="font-size:1.5em; text-align:center">Current Engineer </div> <div> Engineer's Name</div> <div id="clickText" style="padding-bottom: 10px; font-size:0.75em; text-align:center "> (Click to See All Permits) </div> </div>

Answer 1

• 刪除-1 z-index，否則它會在頁面的其余部分下
• 在頁面加載事件中添加事件監聽器

有關解決方法，請參閱第二個示例

 window.addEventListener("load", function() { document.getElementById("engineersContainer") .addEventListener("click", function(e) { console.log("It was clicked"); }); });

 .barContainer { margin: 2px; border: 2px solid black; border-radius: 20px; width: 200px; //width:-moz-fit-content; //width: fit-content; padding: 5px; overflow: hidden; position: relative; background: #34e8eb; /* z-index: -1 */ } .containerHeader:before { content: ""; background: skyblue; position: absolute; inset: 0; z-index: -1; height: 45px } .containerHeader { font-size: 1.5em; text-align: center } #clickText { padding-bottom: 10px; font-size: 0.75em; text-align: center }

 <div id="engineersContainer" class="barContainer"> <div id="engineerList" class="containerHeader">Current Engineer </div> <div> Engineer's Name</div> <div id="clickText"> (Click to See All Permits) </div> </div>

否則在它上面添加另一個 div

 window.addEventListener("load", function() { document.getElementById("engineersContainerClick").addEventListener("click", function(e) { console.log("It was clicked"); }); });

 .barContainer { margin: 2px; border: 2px solid black; border-radius: 20px; width: 200px; //width:-moz-fit-content; //width: fit-content; padding: 5px; overflow: hidden; position: relative; background: #34e8eb; z-index: -1 } #engineersContainerClick { margin: 2px; border-radius: 20px; width: 200px; height:70px; padding: 5px; border:none; overflow: hidden; position: absolute;top:0; background-color: transparent; z-index:999; } .containerHeader:before { content: ""; background: skyblue; position: absolute; inset: 0; z-index: -1; height: 45px } .containerHeader { font-size: 1.5em; text-align: center } #clickText { padding-bottom: 10px; font-size: 0.75em; text-align: center }

 <div id="engineersContainer" class="barContainer"> <div id="engineerList" class="containerHeader">Current Engineer </div> <div> Engineer's Name</div> <div id="clickText"> (Click to See All Permits) </div> </div> <div id="engineersContainerClick" class="barContainer">

Answer 2

您需要刪除 CSS 中的z-index: -1 。

任何用戶點擊都不是與元素接觸，而是與元素上方的文檔接觸。

---

工作示例：

 document.getElementById("engineersContainer").addEventListener("click", function(e) { console.log("It was clicked"); alert("It was clicked"); });

 .barContainer { margin: 2px; border: 2px solid black; border-radius: 20px; width: 200px; /* width:-moz-fit-content; */ /* width: fit-content; */ padding: 5px; overflow: hidden; position: relative; background: #34e8eb; } .containerHeader:before { content:""; background: skyblue; position: absolute; inset: 0; z-index: -1; height:45px }

 <div id="engineersContainer" class="barContainer"> <div id="engineerList" class="containerHeader" style="font-size:1.5em; text-align:center">Current Engineer </div> <div> Engineer's Name</div> <div id="clickText" style="padding-bottom: 10px; font-size:0.75em; text-align:center "> (Click to See All Permits) </div> </div>

Answer 3

 document.getElementById("engineersContainer").onclick=function(){ console.log("your event"); }

 .barContainer { margin: 2px; border: 2px solid black; border-radius: 20px; width: 200px; //width:-moz-fit-content; //width: fit-content; padding: 5px; overflow: hidden; position: relative; background: #34e8eb; } .containerHeader:before { content:""; background: skyblue; position: absolute; inset: 0; z-index: -1; height:45px }

 <body> <div id="engineersContainer" class="barContainer"> <div id="engineerList" class="containerHeader" style="font-size:1.5em; text-align:center">Current Engineer </div> <div> Engineer's Name</div> <div id="clickText" style="padding-bottom: 10px; font-size:0.75em; text-align:center "> (Click to See All Permits) </div> </div> </body>

ng-js -->

document.getElementById("engineersContainer").onclick=function(){   
console.log("your event");
}

    <div id="engineersContainer"> Here is the Engineers Container
    </div>

我會為此使用匿名函數。 您必須在創建 div 后調用腳本，因為 Javascript 是從上到下讀取的，如果在放置 div 之前運行它，則不會有引用。

請注意，如果您在容器 div 上有一個偵聽器，它將影響您稍后在 divs 子元素（例如按鈕）中引入任何可點擊選項的能力。 這會在未來給你帶來問題嗎？ 如果是這樣，重新考慮設計可能會在以后為您省去一些麻煩。 此外，負 Z 索引需要刪除，因為它被繪制在 Javascript 檢測點擊的圖層下方。 對不起，我是 StackO 的新手。