Что такое действия браузера по умолчанию, и зачем их отменять в JavaScript? Как правило, это переходы по ссылкам, отправка формы по клику на кнопке типа submit. Также программным путем можно отменить выделение текста или заблокировать текстовое поле. Разберем несколько типичных вариантов отмены действий браузера по умолчанию в JavaScript. Начнем с ссылок.
Пример 1. Отмена перехода по ссылке.
В случае, когда вам нужно отменить действие по умолчанию, а это для ссылок загрузка страницы по адресу, указанному в атрибуте href, можно использовать метод объекта Event event.preventDefault() или написать return false. Есть еще один способ, который часто использовался ранее и в меньшей степени сейчас, - записать в атрибут href="javascript:void(0)".
Рассмотрим пример, когда ссылки содержат код JavaScript в качестве атрибута onclick:
| 1 2 3 4 5 | <a href="https://google.com.ua" onclick="if(!confirm('Вы действительно хотите выполнить поиск?')) return false">Google</a><br> <a href="https://mail.ru" onclick="alert('Переход запрещен'); return false;">Mail.ru</a><br> <a href="https://vk.com" onclick="alert('Извините, ничего не получится'); event.preventDefault();">ВКонтакте</a><br> <a href="javascript:void(0)">Ссылка в никуда</a><br> <a href="//html-plus.in.ua/obrabotka-sobytiya-onclick/">Обычная ссылка</a><br> |
В первом случае вы перейдете по ссылке только, если нажмете "Ок" в диалоговом окне confirm(). Во втором и 3-м случае переход не состоится, а в последнем
Пример 2. Отображение модального окна при клике на ссылку
Второй пример, в котором при клике на ссылку нам не нужно никуда переходить - это создание модальных окон. В этом случае ссылка, как правило, выглядит, как якорь, т.е. ведет на html-элемент текущей страницы с определенным id. Однако такой элемент скрыт изначально, а показать его надо именно по клику на ссылке. Для того чтобы отменить переход, мы воспользуемся методом event.preventDefault().
Разметка, стили и JavaScript-код примера представлены ниже.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <style> #modal { background-color: #fff; color: #333; border: 2px solid #ccc; padding: 20px; max-width: 400px; margin: 10% auto; } .modal-header { position: relative; margin: -20px; margin-bottom: 15px; } .modal-close { position: absolute; top: 7px; right: 8px; font-size: 26px; font-weight: bold; cursor: pointer; } #modal h2 { background-color: #567cf8; color: #fff; padding: 10px; margin: 0; } .bg-black { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); z-index: 5; } .hidden { display: none; } </style> <div id="modal" class="hidden"> <div class="modal-header"> <h2>Модальное окно</h2> <div class="modal-close">×</div> </div> <div class="modal-text"></div> </div> <div class="test"> <p>Текст до модального окна. Щелкните на ссылке, чтобы открыть модальное окно.</p> <a href="#modal">Открыть модальное окно</a> </div> <script> let body = document.body, modal = document.getElementById('modal'), modalClose = document.querySelector('.modal-close'); document.querySelector('[href^="#modal"]').onclick = function(e) { e.preventDefault(); let bg = document.createElement('div'); bg.className = 'bg-black'; modal.classList.remove('hidden'); modal.children[1].innerHTML = 'Вы открыли модальное окно'; bg.append(modal); body.append(bg); }; modalClose.addEventListener('click', function() { body.prepend(modal); modal.classList.add('hidden'); document.querySelector('.bg-black').remove(); }) </script> |
Откройте модальное окно сами.
Модальное окно
Текст до модального окна. Щелкните на ссылке, чтобы открыть модальное окно.
Открыть модальное окноПример 3. Отменяем отправку формы
Для отправки формы есть событие "submit", которое происходит автоматически при нажатии на кнопку типа "submit" или на клавишу Enter. Однако перед тем, как форму отправлять на сервер, ее нужно проверить с помощью JavaScript на соответствие определенным правилам. В HTML5 появились новые поля, например email или url, которые имеют встроенную проверку на соответствие определенным символам. Также появился атрибут required, который не дает браузеру отправить форму, если пользователь не ввел в поля с этим атрибутом хотя бы 1 символ.
На рисунке показано, какие предупреждения выводит браузер Google Chrome при заполнении различных по типу полей при нажатии на кнопку с type="submit".
Однако, ввод 1 символа - это недостаточно для заполнения поля с логином, например. Поэтому перед отправкой формы нужно еще дополнительно проверить все поля. Для этого в коде ниже мы используем this.userName.value.length для проверки количества введенные символов для поля с атрибутом name="userName", а для проверки полей с name="userEmail" и name="userSite" будем использовать регулярные выражения, т.к. встроенная проверка браузера на email ищет символ @ и хотя бы 1 символ после него и удовлетворяется этим, а url проверяется на наличие http:// (https://) и хотя бы одного символа после слэша. Этого недостаточно, поэтому подключаем JavaScript-код и, если проверка не пройдена, т.е. условие в конструкции if() возвращает false, то и для всей функции мы используем return false, отменяя таким образом действие браузера по умолчанию - отправку формы на сервер.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <form name="testForm" id="testForm" class="test"> <p><label for="userName">Логин</label><input type="text" name="userName" required></p> <p><label for="userEmail">Email</label><input type="email" name="userEmail" required></p> <p><label for="userSite">Сайт</label><input type="url" name="userSite" required></p> <p><input type="submit" id="form-submit" value="Отправить"></p> </form> <script> document.testForm.onsubmit = function() { console.log(this.userName.value); if (this.userName.value.length < 6) { alert('В логине должно быть не менее 6 символов'); this.userName.focus(); return false; } const emailRE = /^([-_a-zA-Z0-9\.]){3,}@[a-z-_0-9]*(\.[a-z]{2,7}){1,2}$/; if (!emailRE.test(this.userEmail.value)) { alert('Некорректный email'); this.userEmail.focus(); return false; } const regSite = /^(http|https)?:\/\/[a-zA-Z0-9-\.]+\.[a-z]{2,4}/; if (!regSite.test(this.userSite.value)) { alert('Некорректный url сайта'); this.userSite.focus(); return false; } return true; } </script> |
Тестируем пример с отправкой формы:
Еще одним из вариантов использования метода event.preventDefault() является обработка событий Drag & Drop в JavaScript.
