Привет. Есть следующая структура:
<div class="parent">
<div class="child">
</div>
</div>
Элемент с классом .parent спозиционирован абсолютно. А элемент с классом .child спозиционирован относительно. Я повесил событие click на $('window') и проверяю, что есть целью(e.target). Так вот, когда я кликаю по родительскому элементу, то в консоль выводится, что я кликнул по дочернему элементу .child. Почему так происходит?
Попробуйте место e.target , вывести this , или e.currentTarget !
в кого кликаешь - тот и таргет.
$(window).click(e=> console.log(e.target));
.parent{
position: absolute;
background: green;
width: 100px;
height:100px;
}
.child{
background: blue;
margin-left: 50px;
width: 100px;
height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
</div>
</div>
А вот ответ на сам вопрос, содержащийся в теле: почему так происходит?
Называется весь этот беспредел - event bubblingи event capturing, почитай Статью
Скорее всего дело во всплытии. Используйте event.stopImmediatePropagation();
$('window').on('click', function(event){
event.stopImmediatePropagation();
console.log(event.target);
});
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости