Question 45303 in Html Question posted in
Some basic documentation can be found here.

How to make parent div not passing click to child div – Html

I have a parent <div /> that covers the whole page. Within this parent <div /> I am having a smaller child <div />. I do not want the child <div /> to be clickable, when the parent <div /> overlays the child `.

function parentFunction(event) {
  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }
}

function childFunction() {
  alert("CHILD");
}
    
.child {
  padding: 50px;
  width: 100px;
  height: 100px;
  background-color: hotpink;
  text-align: center;
  cursor: pointer;
}

.parent {
    width: 500px;
    height: 500px;
    filter: blur(2px);
    display: flex;
    justifc-content: center;
    align-items: center;
    align-content: center;
    background-color: lightgray;
}
<body>
  <div
      onclick="parentFunction(event)"
      class="parent">
      <div
          onclick="childFunction()"
          class="child">
          Child
      </div>
  </div>
</body>

Stop propagation:
<input type="checkbox" id="check">
Tags:

3

Answers


  1. 0

    As it was previously stated the propagation goes from child to parent and not the other way around.

    Possibilities you have:

    • add the style pointer-events: none to the child div

    or

    • in the childFunction() check if the parent div exists and if so just return;
    Login or Signup to reply.
  2. 0

    Here’s a solution that would likely answer your need.

    When you click on the Parent, which holds a child inside, it will tell you which element was clicked. Then you can if yourself into the destination/solution you require in the functionality.

    document.querySelector(".parent").addEventListener("click", parentFunction)
function parentFunction(e) {
  if (document.getElementById("check").checked && e.target == document.querySelector(".child")) {
    e.stopPropagation();
    console.log("EXIT")
    return;
  }
  console.log("PARENT says target is: ", e.target)
}
    body {
    display: flex;
    justifc-content: center;
    align-items: center;
    flex: 1;
    width: 100vh;
    height: 100vw;
}
    
.child {
  padding: 50px;
  width: 100px;
  height: 100px;
  background-color: hotpink;
  text-align: center;
  cursor: pointer;
}

.parent {
    width: 500px;
    height: 500px;
    filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: lightgray;
cursor:pointer;

}
    <body>
  <div
      class="parent">
      <div
          class="child">
          Child
      </div>
  </div>
</body>

Stop propagation:
<input type="checkbox" id="check">
    Login or Signup to reply.
  3. 0

    It is on the other way around, when you click on the child you don’t want the event to be propagated to the parent which is overlapping it, so it should be instead:

    function parentFunction(event) {
  console.log("PARENT");
}

function childFunction() {
  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }

  console.log("CHILD");
}
    .child {
  padding: 50px;
  width: 100px;
  height: 100px;
  background-color: hotpink;
  text-align: center;
  cursor: pointer;
}

.parent {
  width: 500px;
  height: 500px;
  filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: lightgray;
}
    <body>
  <div onclick="parentFunction(event)" class="parent">
    <div onclick="childFunction()" class="child">
      Child
    </div>
  </div>
</body>

Stop propagation:
<input type="checkbox" id="check">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search