.preventDefault()

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать