Как проверить клик по элементу на нативном javascript?

Question

[Денис Букреев]

Такие дела.

Есть элемент-оболочка, в котором лежит дочерний элемент, в котором, в свою очередь много мелких элементов.

Как проверить клик по дочернему элементу при клике по оболочке на нативном JS?

Answer 1

[S3Ga]

Не совсем понял что вы имеете ввиду

<div id="box"><button id="btn">кнопка</button></div>

document.getElementById("box").addEventListener("click",
function(e){
e = e || window.event;
var target = e.target || e.srcElement;
if(target.id == "btn") alert("Клик по дочернему!");
}
);

Comments

[Денис Букреев]

не совсем то
соль вот в чем - при клике по оболочке должно происходить действие
а при клике по дочернему элементу и всем его внутренним - отмена действия

неужели надо проверять все дочерние элементы на событие клик?

[S3Ga]

Денис Букреев: не обязательно. Можно писать условия вроде if(container.contains(childElement)) - contains как раз служит для проверки на вложенность. При клике на элемент проверяете если target(см пример выше) равен вашей оболочке то выполняете действие, иначе если target вложен в оболочку то отменяете действие

Answer 2

[Faliah]

Посмотрите пример реализации. На блоке .wrapper висит обработчик 'click' который обрабатывает как клики по самомму элементу, так и по всем дочерним. Для проверки элемента, инициировавшего событие, используется свойство e.target, результат выводится в консоль. Данный код должен корректно работать в IE9+

Comments

[Григорий]

Как я понимаю работа ведётся с уже существующими элементами
У меня элемент повялется на странице случайным образом, при загрузке документа его нет
Поэтому вешаю обработчик на document.addEventListener и там уже хочу проверить по какому элементу был клик
Проблема в том что внутри элемента может быть множество других
Поэтому нужно проверить что клик был по элементу или по его детям
И ещё раз элемента в DOM нет, он появляется случайным образом