Два блока: внешний и внутренний. Клик по внутреннему не должен запускать внешний обработчик. Пример:
outerEl.onclick = () => alert('Внешний блок');
innerEl.onclick = event => { event.stopPropagation(); alert('Внутренний блок'); };
Я часто использую event.stopPropagation, когда нужно разделить реакцию разных блоков на один и тот же клик. Однажды я столкнулся с такой проблемой в проекте, где клик на маленьком элементе срабатывал и на родительском, и это полностью нарушало логику. stopPropagation отлично решает эту задачу и позволяет четко определить, какие события должны выпасть. Плюс, этот метод прост и понятен, так что не стоит усложнять.
Свой опыт подсказывает, что stopPropagation работает отлично, но стоит помнить, что полностью прерывает цепочку событий. В сложных интерфейсах важно понимать, где именно нужен контроль, а где наоборот — событие должно дойти до родительских элементов. Мне приходилось комбинировать разные подходы, чтобы сохранить нужную логику обработки. Всегда тестируйте конечное поведение.
В своей практике сталкивался, что иногда требуется больше, чем просто остановка всплытия. Дополнительная проверка по target или даже изменение логики делегирования событий может помочь. А у кого были случаи, когда stopPropagation не срабатывал как надо? Что можно предложить для таких случаев?