Клавиша / esc

.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)
})

        
        
          
        
      

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

Когда происходит событие 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()
  // Код по подготовки данных
  // и их отправка на сервер
})

        
        
          
        
      

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

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

Скопировано
Задать вопрос в рубрику
🤚 Я знаю ответ

Это вопрос без ответа. Вы можете помочь! Чтобы написать ответ, следуйте инструкции.