`.preventDefault()`

Отменяет действие по умолчанию для события.

Время чтения: меньше 5 мин

Кратко

Скопировано

На каждое действие пользователя на сайте браузер создаёт события. Это главный способ понимать в коде, что происходит на странице. Событие — это объект, который имеет набор свойств и методов для взаимодействия с ним.

preventDefault() — метод события. Этот метод отменяет поведение браузера по умолчанию, которое происходит при обработке события.

Например, при нажатии на ссылку мы переходим по адресу этой ссылки. Вызов preventDefault() отменит это поведение.

Как пишется

Скопировано

Отменим переход по ссылке для всех тегов <a> на странице. Для этого получим все ссылки с помощью querySelector(), подпишемся на событие 'click' и вызовем preventDefault():

        
          
          const links = document.querySelector('a')links.addEventListener('click', (event) => {  // Отменяем действие по умолчанию.  // Перехода по ссылке не будет  event.preventDefault()})
          const links = document.querySelector('a')

links.addEventListener('click', (event) => {
  // Отменяем действие по умолчанию.
  // Перехода по ссылке не будет
  event.preventDefault()
})

Пример

Скопировано

Открыть демо в новой вкладке

Как понять

Скопировано

Давайте разберём код из интерактивного примера:

        
          
          const runTimer = (inputElement) => {  setTimeout(() => {    inputElement.focus()  }, 5000)}const inputElement = document.querySelector('.input')inputElement.addEventListener('mousedown', (event) => {  event.preventDefault()  runTimer(inputElement)})
          const runTimer = (inputElement) => {
  setTimeout(() => {
    inputElement.focus()
  }, 5000)
}

const inputElement = document.querySelector('.input')
inputElement.addEventListener('mousedown', (event) => {
  event.preventDefault()
  runTimer(inputElement)
})

Когда пользователь нажимает на элемент с классом input, генерируется цепочка событий в следующем порядке: mousedown → mouseup → click.

Когда происходит событие mousedown, браузер устанавливает фокус на поле ввода. Вызовом event.preventDefault() мы отменили это поведение. Затем мы запустили таймер, который установит фокус на элементе через 5 секунд с помощью вызова метода focus().

На практике

Скопировано

Георгий Милевский советует

Скопировано

🛠 Часто возникает необходимость отправить данные из формы на сервер без перезагрузки страницы. Поведение по умолчанию формы — это отправка запроса на сервер и перезагрузка страницы. Тут нам на помощь приходит метод preventDefault(), который отменит действия, связанные с отправкой формы.

        
          
          <form class="discount-form">  <label for="promocode">Промокод</label>  <input    id="promocode"    type="text"    name="promocode"    placeholder="WIN-1234"    required  >  <button type="submit">Применить</button></form>
          <form class="discount-form">
  <label for="promocode">Промокод</label>
  <input
    id="promocode"
    type="text"
    name="promocode"
    placeholder="WIN-1234"
    required
  >
  <button type="submit">Применить</button>
</form>

        
          
          const form = document.querySelector('.discount-form')form.addEventListener('submit', (event) => {  event.preventDefault()  // Код по подготовки данных  // и их отправка на сервер})
          const form = document.querySelector('.discount-form')
form.addEventListener('submit', (event) => {
  event.preventDefault()
  // Код по подготовки данных
  // и их отправка на сервер
})

Подробнее этот подход разбирается в статье «Работа с формами».

На собеседовании

Скопировано

Задать вопрос в рубрику

🤚 Я знаю ответ

Viktar Nezhbart отвечает

Скопировано

Методы event.preventDefault() и event.stopPropagation() предназначены для решения похожих задач и часто используются вместе.

Метод event.stopPropagation() останавливает распространение события (event propagation). Распространение события включает стадию захвата и стадию всплытия. Например, рассмотрим обработку события на стадии захвата — при распространении события от родительских элементов к дочерним. Обработчик, объявленный в дочернем элементе, не будет вызван после выполнения stopPropagation() в обработчике родительского элемента. При этом действие по умолчанию не отменится.

Метод event.preventDefault() отменяет действие по умолчанию. Например, переход по ссылке при клике на элемент <a>. Само событие продолжает распространяться после выполнения preventDefault().

Рассмотрим пример. Есть простая форма:

        
          
          <form>  <label for="id-checkbox">Это чекбокс:</label>  <input type="checkbox" id="id-checkbox"></form>
          <form>
  <label for="id-checkbox">Это чекбокс:</label>
  <input type="checkbox" id="id-checkbox">
</form>

Добавим обработку клика по форме и чекбоксу на стадии всплытия:

        
          
          const form = document.querySelector('form')const label = form.querySelector('label')const checkbox = form.querySelector('#id-checkbox')form.addEventListener('click', formClick)checkbox.addEventListener('click', checkboxClick)function formClick(event) {  form.style.border = '1px solid black'}function checkboxClick(event) {  checkbox.style.color = 'blue'}
          const form = document.querySelector('form')
const label = form.querySelector('label')
const checkbox = form.querySelector('#id-checkbox')

form.addEventListener('click', formClick)
checkbox.addEventListener('click', checkboxClick)

function formClick(event) {
  form.style.border = '1px solid black'
}

function checkboxClick(event) {
  checkbox.style.color = 'blue'
}

При клике по чекбоксу изменится цвет подписи, а также появится рамка вокруг формы.

В данном случае действием по умолчанию будет переключение чекбокса. Чтобы отменить это поведение, добавим preventDefault() в обработчик checkboxClick:

        
          
          function checkboxClick(event) {  checkbox.style.color = 'blue'  event.preventDefault()}
          function checkboxClick(event) {
  checkbox.style.color = 'blue'
  event.preventDefault()
}

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

Чтобы остановить всплытие события, но позволить чекбоксу переключаться, заменим event.preventDefault() на stopPropagation():

        
          
          function checkboxClick(event) {  checkbox.style.color = 'blue'  event.stopPropagation()}
          function checkboxClick(event) {
  checkbox.style.color = 'blue'
  event.stopPropagation()
}

Методы preventDefault() и stopPropagation() также можно использовать при обработке событий на стадии захвата.

Например, мы можем отменить действие по умолчанию, используя обработчик formClick. Для этого объявим его для срабатывания на стадии захвата:

        
          
          // formClick будет работать на стадии захвата событияform.addEventListener('click', formClick, true)checkbox.addEventListener('click', checkboxClick)function formClick(event) {  form.style.border = '1px solid black'  event.preventDefault()}function checkboxClick(event) {  checkbox.style.color = 'blue'}
          // formClick будет работать на стадии захвата события
form.addEventListener('click', formClick, true)
checkbox.addEventListener('click', checkboxClick)

function formClick(event) {
  form.style.border = '1px solid black'
  event.preventDefault()
}

function checkboxClick(event) {
  checkbox.style.color = 'blue'
}

☝️ Обратите внимание, что checkboxClick() выполняется, но сам чекбокс не переключается. Это действие уже отменено в функции formClick(), которая теперь срабатывает раньше, чем событие достигнет чекбокса.

Если заменить preventDefault() на stopPropagation(), обработчик checkboxClick не выполнится, но действие по умолчанию произойдёт:

        
          
          function formClick(event) {  form.style.border = '1px solid black'  event.stopPropagation()}
          function formClick(event) {
  form.style.border = '1px solid black'
  event.stopPropagation()
}

Кратко

Как пишется

Пример

Как понять

На практике

Георгий Милевский советует

На собеседовании

Viktar Nezhbart отвечает

Читайте также

Событийная модель

Псевдоклассы

DOM