Как метод stopPropagation влияет на взаимодействие с родительскими элементами в DOM?

Метод stopPropagation() влияет на взаимодействие с родительскими элементами в DOM следующим образом: он предотвращает распространение события по DOM-дереву и блокирует его обработку на родительских или дочерних элементах. 2

После того как событие произошло, оно активирует обработчики событий, передвигаясь от целевого элемента к его родительским элементам. 2 Задача stopPropagation() — прервать это распространение, создавая стену, за которой событие остаётся незамеченным для родительских элементов. 2

Например, если к родительскому элементу прикреплён обработчик события, а к дочернему — нет, вызов stopPropagation() в обработчике дочернего элемента предотвратит выполнение обработчика родительского элемента. 5

Это полезно, когда к элементам во вложенной структуре прикреплено несколько обработчиков событий, и нужно, чтобы событие обрабатывалось только тем элементом, на котором оно сгенерировалось, а не его родительскими элементами. 5