I have been working on the project where i need to show data on OnClick as Popover. Where user clicks it contains inside multiple tags, my On click is working on Tag in which I'm giving the id to click but its not working on other tags that are inside it. I hope u will get my point from my code.
<!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>You want to add an event listener and specify the click event. That would look something like this:
button.addEventListener("click", event => {
// Your function goes here
});
There are plenty of ways to resolve this, one way is making the z-index of showOnClick element higher than the elements inside, the other is making the elements inside the div showOnClick no clickables via css props:
Example:
#showOnClick p,div {
pointer-events: none;
}