He estado trabajando en el proyecto donde necesito mostrar datos en OnClick como Popover. Cuando el usuario hace clic, contiene dentro de varias etiquetas, mi Al hacer clic funciona en la etiqueta en la que doy la identificación para hacer clic, pero no funciona en otras etiquetas que están dentro. Espero que obtenga mi punto de mi código.
<!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>Desea agregar un detector de eventos y especificar el evento de clic. Eso se vería algo como esto:
button.addEventListener("click", event => { // Your function goes here });Hay muchas maneras de resolver esto, una forma es hacer que el índice z del elemento showOnClick sea más alto que los elementos internos, la otra es hacer que los elementos dentro del div showOnClick no se puedan hacer clic a través de accesorios css:
Ejemplo:
#showOnClick p,div { pointer-events: none; }