.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) => {    setTimetout(() => {      inputElement.focus()    }, 5000)  }  const inputElement = document.querySelector('.input')  inputElement.addEventListener('mousedown', (event) => {      event.preventDefault()      runTimer(inputElement)  });
            const runTimer = (inputElement) => {
    setTimetout(() => {
      inputElement.focus()
    }, 5000)
  }

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

        
        
          
        
      

Когда пользователь нажимает на инпут элемент, генерируется цепочка событий в следующем порядке: 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()

    // код по подготовке данных
    // и их отправка на сервер
})

        
        
          
        
      

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