Приветствую.
Изучите как работают события в DOM. Это очень полезно. Trust me. Они погружаются до элемента и потом всплывают. Вот хорошие примеры -
learn.javascript.ru/event-bubbling
Вкратце, когда вы кликаете на DOM-ноду,
1. событие начинает свой путь от самого корневого элемента, от
document,
2. доходит до кликнутого элемента, запускает обработчики если они есть на этом элементе
3. начинает всплывать, запуская обработчики на каждом элементе у которого есть обработчики на такой тип события, в данном примере
click
Всплытие можно остановить и это как раз то, что вам нужно
<div class="parent">
<div class="son">son</div>
<div class="son1">son 1</div>
<div class="son2">son 2</div>
</div>
$('.parent').on('click', function() {
console.log('parent function');
});
$('.son').on('click', function(event) {
event.stopPropagation();
console.log('son function');
});
Что в данном случае происходит, событие опускается до
$('.son'), запускает обработчик
function(event) {...});, а
event.stopPropagation(); запрещает событию
click всплыть, то есть подняться до элемента
$('.parent'), поэтому обработчики
$('.parent') не запускаются.
Ещё бы хотел посоветовать меньше лезть/смотреть в DOM. Говорят это очень ресурсоемкие задачи, так родился Virtual DOM.
Что в вашем примере не так.
Вы сначала лезете в DOM за
$('.parent'), а потом за
$('.son').
Сохраняя
$('.parent'), вы уже можете обратится к
$('.son') без лазания в DOM.
То есть ваш пример выгоднее бы выглядел вот так
const $parent = $('.parent');
const $son = $parent.find('.son');
$parent.on('click', function() {
console.log('parent function');
});
$son.on('click', function(event) {
event.stopPropagation();
console.log('son function');
});
Я понимаю, что в данном примере это вообще никак не отразится на производительности, но если ваше приложение чуть сложнее, чем этот пример, то профиты будут.
