Разница между методами preventDefault() и stopPropagation() в JavaScript

В этой статье мы обсудим методы PreventDefault и stopPropagation с подходящими примерами кода для каждого условия, а затем увидим разницу между PreventDefault и stopPropagation.

Метод preventDefault(): это метод, присутствующий в интерфейсе события. Этот метод не позволяет браузеру выполнять поведение выбранного элемента по умолчанию. Этот метод может отменить событие, только если событие можно отменить. Например, есть некоторые события, которые невозможно предотвратить, такие как событие прокрутки и колеса.

Синтаксис:

event.preventDefault();

Параметр: этот метод не принимает никаких параметров.

Мы увидим подходы к применению обоих методов на примерах.

Пример 1: Предотвращение перехода ссылки по URL-адресу, чтобы браузер не мог перейти на другую страницу.

Выход:

Пример 2: Это запрещает пользователю устанавливать флажки. Обычно, когда мы нажимаем на флажки, они переключаются, но ничего не работает после вызова метода preventDefault().

Выход:

Метод события stopPropagation(): этот метод используется для предотвращения доступа родительского элемента к событию. По сути, этот метод используется для предотвращения распространения одного и того же события. Например, у нас есть элемент кнопки внутри тега div , и на обоих из них есть событие onclick , затем всякий раз, когда мы пытаемся активировать событие, прикрепленное к элементу кнопки , событие, прикрепленное к элементу div , также выполняется, потому что div является родителем элемента кнопки.

синтаксис:

event.stopPropagation();

Мы можем решить эту проблему, используя метод stopPropagation() , потому что это предотвратит доступ родителя к событию.

Пример 1:

Выход:

Здесь, после нажатия на кнопку, обе функции будут выполнены.

Пример 2:

Выход:

Теперь в этом случае мы добавили метод event.stopPropagation() , тогда будет выполняться единственная функция элемента кнопки .

Разница между методами preventDefault() и stopPropagation():