SOURCE

const aBox = document.querySelectorAll(".box");
const oWrap = document.querySelector("#wrap");

aBox.forEach(function(ele) {
  ele.addEventListener("click", function(e) {
    console.log("1");
     e.stopPropagation();
    this.style.backgroundColor = "red";
    return false;
  }, true)
});

oWrap.addEventListener("click", function(e) {
  console.log("2")
  aBox.forEach(ele => {
    ele.style.backgroundColor = "white";
  })
}, false)

<div class="box-wrap" id="wrap">
  <div class="box"></div>
  <div class="box"></div>
</div>

.box-wrap {
  width: 300px;
  height: 300px;
  outline: 1px solid blue;
}
.box {
  width: 100px;
  height: 100px;
  outline: 1px dashed red;
  float: left;
  margin: 15px;
  background-color: white;
}