В чем разница между event.stopPropagation и event.preventDefault?

Question

Кажется, что они делают одно и то же...
Одна из них современная, а другая старая? Или они поддерживаются разными браузерами?

Когда я обрабатываю события самостоятельно (без фреймворков), я всегда проверяю оба варианта и выполняю оба, если они присутствуют. (Я также использую return false, но у меня есть ощущение, что это не работает с событиями, подключенными с помощью node.addEventListener).

Так зачем оба варианта? Мне продолжать проверять оба? Или между ними действительно есть разница?

(Знаю, много вопросов, но они все как бы связаны между собой =))

Answer 1

event.preventDefault(); предотвращает выполнение стандартного действия элемента.

event.stopPropagation(); предотвращает всплытие события по дереву DOM, что означает, что родительские обработчики событий не будут уведомлены о данном событии.

Например, если у вас есть ссылка с обработчиком клика внутри DIV или FORM, в которых также есть свой обработчик клика, то использование event.stopPropagation(); предотвратит вызов обработчика клика у DIV или FORM.

Answer 2

Давайте сравним preventDefault и stopPropagation.

Все эти методы могут использоваться в обработчиках событий.

event.preventDefault() предотвращает стандартное поведение браузера для данного элемента. Например, для элемента form это предотвращает отправку формы, а для элемента href – переход по ссылке.

event.stopPropagation() останавливает событие от всплытия или распространения по дереву DOM.

Что касается

return false, то это комбинация как preventDefault(), так и stopPropagation().

Таким образом, если вы хотите остановить стандартное поведение элемента и предотвратить всплытие события, вы можете просто вернуть false в обработчике события.

В чем разница между event.stopPropagation и event.preventDefault?

2 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных