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