preventDefault, stopPropagation, stopImmediatePropagation, return false

by DevNotes - записки JavaScript разработчика
preventDefault, stopPropagation, stopImmediatePropagation, return false

preventDefault - предотвращает выполнение стандартного события, если оно отменяемое (можно использовать event.cancelable, чтобы проверить, является ли событие отменяемым).

stopPropagation - предотвращает передачу (всплытие) события к родительским элементам.

stopImmediatePropagation - предотвращает выполнение всех последующих обработчиков этого события на данном элементе.

return false - то же самое, что выполнить preventDefault и stopPropagation вместе.

Пример

Попробовать тут

<div>
   <a href="/">link</a>
</div>

Добавим обработчики события click:

$('div').click(event => {
   console.log('click on div')
})
$('a').click(event => {
   #code // здесь код из примеров ниже
})
$('a').click(event => {
   console.log('2 click on a')
})


Если в #code будет

event.preventDefault()
console.log('1 click on a')

то при нажатии на link пользователь не будет никуда перенаправлен, так как сработает event.preventDefault(), а в консоли выведется следующее:

> 1 click on a
> 2 click on a
> click on div


Если в #code будет

event.preventDefault()
event.stopPropagation()
console.log('1 click on a')

то обработчики родительских элементов не сработают. В консоль упадет:

> 1 click on a
> 2 click on a


То же самое будет, если в #code написать

console.log('1 click on a')
return false


Если в #code будет

event.preventDefault()
event.stopImmediatePropagation()
console.log('1 click on a')

то последующие обработчики не сработают. В консоль упадет:

> 1 click on a
November 5, 2018