<body>
<div id="myDiv">
<h1 id="myHeader">This is my Header</h1>
</div>
<script type="text/javascript">
$(document).ready(() => {
$('#myDiv').click(() => {
console.log('Div Clicked');
})
$('#myHeader').click((event) => {
console.log('Header Clicked');
event.stopPropagation();
})
});
</script>
</body>
Теперь, если щелкнуть h1, остановка распространения события не позволяет распространить событие click на родительский элемент div.
В консоли вы должны увидеть только нажатый заголовок.