[Solved] My div with absolute position is affected by a clic of its parent [duplicate]

by


You can pass the click event to the callback function. Then you can check for the event.target element and react to it, returning false to do nothing or proceeding with your code.

For the sake of this demonstration, I simply check if there is a click handler set on the element, but as you will probably have click handlers on the child elements later as well, you might want to check for event.target.tagName, event.target.id a specific class name, or any other distinctive feature.

As suggested in the comments, another possibility is to register a listener on the child elements and then call event.stopPropagation(), but using this approach, one listener is sufficient.

function clickHere(event) {
  var target = event.target;
  if (!event.target.onclick) return false;
  
  if (document.getElementById("drop").style.display == "block") {
    document.getElementById("drop").style.display = "none";
  } else {
    document.getElementById("drop").style.display = "block";
  }
}
<div style="background:red; height:500px;">
  <div onclick="clickHere(event)" style="margin:auto;height: 40px; width:30%; background:green; position:relative;">
    <div id="drop" style="display:none;width:100%; height:200px; background:blue; position:absolute; top: 100%; margin:0;">
      <h3 style="text-align: center; color:white;">Hello</h3>
      <h3 style="text-align: center; color:white;">Hello</h3>
      <h3 style="text-align: center; color:white;">Hello</h3>
      <h3 style="text-align: center; color:white;">Hello</h3>
    </div>
  </div>
</div>

solved My div with absolute position is affected by a clic of its parent [duplicate]