Agregue el detector de eventos onclick al contenedor div.
Intenté lo siguiente y, como puede ver, el evento no parece estar registrado. ¿Cómo puedo agregar el oyente a este div?
El ID de div que quiero es "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>Vea el segundo ejemplo para una solución
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>De lo contrario, agregue otro div encima
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"> 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>Usaría una función anónima para esto. Debe llamar al script después de que se haya creado su div, ya que Javascript se lee de arriba a abajo y no tendrá una referencia si se ejecuta antes de que se haya colocado el div.
Tenga en cuenta que si tiene un oyente en el contenedor div, afectará su capacidad para introducir cualquier opción en la que se pueda hacer clic dentro de los elementos secundarios de divs, como botones más adelante. ¿Podría esto causarle problemas en el futuro? Si es así, reconsidere el diseño posiblemente para ahorrarle algunos problemas más adelante. Además, el índice Z negativo debe eliminarse, ya que se dibuja debajo de la capa que Javascript detecta los clics. Perdón por las ediciones, soy nuevo en StackO.
Debe eliminar el z-index: -1 en su CSS.
Los clics de los usuarios no hacen contacto con el elemento, sino con el documento que se encuentra sobre el elemento.
Ejemplo de trabajo:
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>