Что делает метод preventdefault
Перейти к содержимому

Что делает метод preventdefault

  • автор:

preventdefault js что это

preventDefault() — это метод объекта события JavaScript, который используется для отмены действия браузера по умолчанию, связанного с определенным событием.

Например, если вы хотите отменить переход по ссылке при клике на нее, вы можете использовать preventDefault() . В частности, этот метод может использоваться для отмены отправки формы при нажатии на кнопку «submit».

document.querySelector('a').addEventListener('click', function (event)  event.preventDefault(); // ваш код здесь >); 

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

.prevent Default ( )

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

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

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Отменим переход по ссылке для всех тегов на странице. Для этого получим все ссылки с помощью query Selector ( ) , подпишемся на событие ‘click’ , и вызовем prevent Default ( ) :

 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 . prevent Default ( ) мы отменили это поведение. Затем мы запустили таймер, который установит фокус на инпут через 5 секунд с помощью вызова метода focus ( ) .

На практике

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

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

Скопировать ссылку «Георгий Милевский советует» Скопировано

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

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

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

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

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

Действия браузера по умолчанию

Многие события автоматически влекут за собой действие браузера.

  • Клик по ссылке инициирует переход на новый URL.
  • Нажатие на кнопку «отправить» в форме – отсылку её на сервер.
  • Зажатие кнопки мыши над текстом и её движение в таком состоянии – инициирует его выделение.

Если мы обрабатываем событие в JavaScript, то зачастую такое действие браузера нам не нужно. К счастью, его можно отменить.

Отмена действия браузера

Есть два способа отменить действие браузера:

  • Основной способ – это воспользоваться объектом event . Для отмены действия браузера существует стандартный метод event.preventDefault() .
  • Если же обработчик назначен через on (не через addEventListener ), то также можно вернуть false из обработчика.

В следующем примере при клике по ссылке переход не произойдёт:

Нажми здесь или здесь

Возврат false из обработчика – это исключение

Обычно значение, которое возвращает обработчик события, игнорируется.

Единственное исключение – это return false из обработчика, назначенного через on .

В других случаях return не нужен, он никак не обрабатывается.

Пример: меню

Рассмотрим меню для сайта, например:

Данный пример при помощи CSS может выглядеть так:

В HTML-разметке все элементы меню являются не кнопками, а ссылками, то есть тегами . В этом подходе есть некоторые преимущества, например:

  • Некоторые посетители очень любят сочетание «правый клик – открыть в новом окне». Если мы будем использовать или , то данное сочетание работать не будет.
  • Поисковые движки переходят по ссылкам при индексации.

Например, вот так:

menu.onclick = function(event) < if (event.target.nodeName != 'A') return; let href = event.target.getAttribute('href'); alert( href ); // может быть подгрузка с сервера, генерация интерфейса и т.п. return false; // отменить действие браузера (переход по ссылке) >;

Если мы уберём return false , то после выполнения обработчика события браузер выполнит «действие по умолчанию» – переход по адресу из href . А это нам здесь не нужно, мы обрабатываем клик сами.

Кстати, использование здесь делегирования событий делает наше меню очень гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.

События, вытекающие из других

Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.

Например, событие mousedown для поля приводит к фокусировке на нём и запускает событие focus . Если мы отменим событие mousedown , то фокусирования не произойдёт.

В следующем примере попробуйте нажать на первом – происходит событие focus . Но если вы нажимаете по второму элементу, то события focus не будет.

Это потому, что отменено стандартное действие mousedown . Впрочем, фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши Tab можно перейти от первого поля ввода ко второму. Но только не через клик мышью на элемент, это больше не работает.

Опция «passive» для обработчика

Необязательная опция passive: true для addEventListener сигнализирует браузеру, что обработчик не собирается выполнять preventDefault() .

Почему это может быть полезно?

Есть некоторые события, как touchmove на мобильных устройствах (когда пользователь перемещает палец по экрану), которое по умолчанию начинает прокрутку, но мы можем отменить это действие, используя preventDefault() в обработчике.

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

Опция passive: true сообщает браузеру, что обработчик не собирается отменять прокрутку. Тогда браузер начинает её немедленно, обеспечивая максимально плавный интерфейс, параллельно обрабатывая событие.

Для некоторых браузеров (Firefox, Chrome) опция passive по умолчанию включена в true для таких событий, как touchstart и touchmove .

event.defaultPrevented

Свойство event.defaultPrevented установлено в true , если действие по умолчанию было предотвращено, и false , если нет.

Рассмотрим практическое применение этого свойства для улучшения архитектуры.

Помните, в главе Всплытие и погружение мы говорили о event.stopPropagation() и упоминали, что останавливать «всплытие» – плохо?

Иногда вместо этого мы можем использовать event.defaultPrevented , чтобы просигналить другим обработчикам, что событие обработано.

Давайте посмотрим практический пример.

По умолчанию браузер при событии contextmenu (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:

  

Теперь в дополнение к этому контекстному меню реализуем контекстное меню для всего документа.

При правом клике должно показываться ближайшее контекстное меню.

Правый клик здесь вызывает контекстное меню документа

Проблема заключается в том, что когда мы кликаем по элементу elem , то мы получаем два меню: контекстное меню для кнопки и (событие всплывает вверх) контекстное меню для документа.

Как это поправить? Одно из решений – это подумать: «Когда мы обрабатываем правый клик в обработчике на кнопке, остановим всплытие», и вызвать event.stopPropagation() :

Правый клик вызывает меню документа

Теперь контекстное меню для кнопки работает как задумано. Но цена слишком высока. Мы навсегда запретили доступ к информации о правых кликах для любого внешнего кода, включая счётчики, которые могли бы собирать статистику, и т.п. Это слегка неразумно.

Альтернативным решением было бы проверить в обработчике document , было ли отменено действие по умолчанию? Если да, тогда событие было обработано, и нам не нужно на него реагировать.

Правый клик вызывает меню документа (добавлена проверка event.defaultPrevented)

Сейчас всё работает правильно. Если у нас есть вложенные элементы и каждый из них имеет контекстное меню, то код также будет работать. Просто убедитесь, что проверяете event.defaultPrevented в каждом обработчике contextmenu .

event.stopPropagation() и event.preventDefault()

Как мы можем видеть, event.stopPropagation() и event.preventDefault() (также известный как return false ) – это две разные функции. Они никак не связаны друг с другом.

Архитектура вложенных контекстных меню

Есть также несколько альтернативных путей, чтобы реализовать вложенные контекстные меню. Одним из них является единый глобальный объект с обработчиком document.oncontextmenu и методами, позволяющими хранить в нём другие обработчики.

Объект будет перехватывать любой клик правой кнопкой мыши, просматривать сохранённые обработчики и запускать соответствующий.

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

Итого

Действий браузера по умолчанию достаточно много:

  • mousedown – начинает выделять текст (если двигать мышкой).
  • click на – ставит или убирает галочку в input .
  • submit – при нажатии на или при нажатии клавиши Enter в форме данные отправляются на сервер.
  • keydown – при нажатии клавиши в поле ввода появляется символ.
  • contextmenu – при правом клике показывается контекстное меню браузера.
  • …и многие другие…

Все эти действия можно отменить, если мы хотим обработать событие исключительно при помощи JavaScript.

Чтобы отменить действие браузера по умолчанию, используйте event.preventDefault() или return false . Второй метод работает, только если обработчик назначен через on .

Опция passive: true для addEventListener сообщает браузеру, что действие по умолчанию не будет отменено. Это очень полезно для некоторых событий на мобильных устройствах, таких как touchstart и touchmove , чтобы сообщить браузеру, что он не должен ожидать выполнения всех обработчиков, а ему следует сразу приступать к выполнению действия по умолчанию, например, к прокрутке.

Если событие по умолчанию отменено, то значение event.defaultPrevented становится true , иначе false .

Сохраняйте семантику, не злоупотребляйте

Технически, отменяя действия браузера по умолчанию и добавляя JavaScript, мы можем настроить поведение любого элемента. Например, мы можем заставить ссылку работать как кнопку, а кнопку вести себя как ссылка (перенаправлять на другой URL).

Но нам следует сохранять семантическое значение HTML элементов. Например, не кнопки, а тег должен применяться для переходов по ссылкам.

Помимо того, что это «хорошо», это делает ваш HTML лучше с точки зрения доступности для людей с ограниченными возможностями и с особых устройств.

Как защитить свой сайт от ошибок пользователей с помощью event.preventDefault() и валидации формы

Как защитить свой сайт от ошибок пользователей с помощью event.preventDefault. главное изображение

Когда пользователь отправляет форму на веб-странице, происходит событие submit . Вы можете использовать JavaScript для обработки этого события и выполнения дополнительной обработки перед отправкой формы на сервер. Например, можно проверить, заполнены ли все обязательные поля формы, прежде чем отправлять ее на сервер.

Вот пример обработки события submit с помощью JavaScript:

 id="myForm">  for="name">Имя:  type="text" id="name" name="name" required> 
for="email">Email: type="email" id="email" name="email" required>
type="submit" value="Отправить"> const form = document.getElementById('myForm'); form.addEventListener('submit', function(event) event.preventDefault(); // отменяем стандартное поведение формы // выполнение дополнительной обработки console.log('Форма отправлена!'); >);

Как использовать метод event.preventDefault() для более эффективной обработки событий на веб-странице.

В этом примере мы добавляем обработчик события submit на элемент form с помощью метода addEventListener() . В функции обратного вызова мы отменяем стандартное поведение формы с помощью метода preventDefault() , чтобы форма не отправлялась на сервер. Затем мы выполняем дополнительную обработку, например, выводим сообщение в консоль.

Как использовать метод event.preventDefault() для более эффективной обработки событий на веб-странице

Метод event.preventDefault() используется для отмены стандартного поведения браузера для данного события. Когда пользователь выполняет определенные действия на веб-странице, браузер может выполнять стандартное действие для этого события. Например, при отправке формы браузер отправляет данные на сервер и перезагружает страницу.

Когда вы вызываете метод event.preventDefault() , вы предотвращаете выполнение стандартного действия браузера для данного события. Это дает вам возможность выполнить свою собственную логику обработки событий. Например, вы можете проверить данные, введенные пользователем в форму, и, если данные не прошли проверку, вы можете отобразить сообщение об ошибке, не отправляя данные на сервер.

В контексте обработки события submit , вызов метода event.preventDefault() позволяет отменить отправку формы на сервер и выполнить дополнительную обработку в JavaScript, прежде чем отправить данные на сервер. Кроме того, вы можете использовать этот метод для валидации формы и предотвращения отправки формы, если данные не прошли проверку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *