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

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

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

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