How to get html element without its children in JavaScript?

Question

I would like to get an html element without its children, to set an event addEventListener("click) on it, so that the function will only be executed when it is clicked, not on its children. I can only use Javascript. Is this possible?

const divs = document.querySelectorAll("div");
const body = document.querySelector("body");

const myFunction = function() {
  this.classList.add("clicked")
}
divs.forEach(function(element) {
  element.addEventListener("click", myFunction)
});

.grandparent {
  padding: 20px;
  border: 5px solid black;
}

.parent {
  padding: 20px;
  border: 5px solid blue;
}

.child {
  padding: 20px;
  height: 100px;
  width: 100px;
  border: 5px solid yellow;
}

.clicked {
  background-color: red;
}

<div data-time="3000" class="grandparent">
  <div data-time="2000" class="parent">
    <div data-time="1000" class="child"></div>
  </div>
</div>

this function adds a class to each div, now I would like clicking outside of div to remove that class, however the body variable contains including its children.

If you do not want to execute the event handler from the events of the children, then you either need to prevent the event from bubbling on the children, or check in the event handler that it did not originate from a child. Retrieving/not retrieving the children of a parent has nothing to do with that kind of logic. — Taplar, Nov 04 '20 at 19:37
`const myFunction = function(event) { event.stopPropagation(); this.classList.add("clicked") }` and bind an event to the grandparent? — epascarello, Nov 04 '20 at 19:44
https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element — epascarello, Nov 04 '20 at 19:45
Does this answer your question? [Ignoring click event when child of element is clicked](https://stackoverflow.com/questions/46841818/ignoring-click-event-when-child-of-element-is-clicked) — Heretic Monkey, Nov 04 '20 at 19:52

score 0 · Answer 1 · answered Nov 04 '20 at 20:31

If you want to ignore all and any child clicks, then check if the currentTarget is different than the target of the event.

target is the element the event originated from (the deepest child that received the event)
currentTarget is the element on which the event handler is attached

const divs = document.querySelectorAll("div");
const body = document.querySelector("body");

const myFunction = function(event) {
  if (event.target === event.currentTarget) {
    this.classList.add("clicked")
  }
}
divs.forEach(function(element) {
  element.addEventListener("click", myFunction)
});

.grandparent {
  padding: 20px;
  border: 5px solid black;
}

.parent {
  padding: 20px;
  border: 5px solid blue;
}

.child {
  padding: 20px;
  height: 100px;
  width: 100px;
  border: 5px solid yellow;
}

.clicked {
  background-color: red;
}

<div data-time="3000" class="grandparent">
  <div data-time="2000" class="parent">
    <div data-time="1000" class="child"></div>
  </div>
</div>

How to get html element without its children in JavaScript?

1 Answers1