Почему на вложенных элементах в div не работает e.target?

Question

[Unknown]

Привет!
Есть ссылка на codepan.
Здесь есть блок .box в котором есть дургие блоки.
Хочу сделать так, что при нажатии на блок .box и все что внутри него НЕ выдавало строку в консоль с помощью такой проверки:

function func(e) {
   if(e.target !== box) {
     console.log('click target !== box');
   }
};

Но как видно из примера по ссылке нажать можно на блоки внутри .box также как и на блок .box-container и только при нажатии на границы блока .box и оставшегося пространства внизу блока код работает корректно.
Что нужно добавить в проверку?
PS Пожалуйста, не пишите код на jQuery

Comments

[Kovalsky]

Также надо проверять является ли box родителем для e.target.

Answer 1

[Stalker_RED]

if (box === e.target) {
     console.log('клик по box');
   } else if(box.contains(e.target)) {
     console.log('клик по дочернему элементу');
   }

https://codepen.io/anon/pen/MEBGYP?editors=1111

Answer 2

[Андрей Андреев]

function func(e) {
   console.log(e.target);
   console.log(box);
   if(e.target !== box) {
     console.log('click target !== box');
   }
};