Как отменить действие в консоли браузера
На предыдущем занятии мы с вами познакомились с таким важным механизмом как погружение и всплытие событий для вложенных элементов. Так вот, используя механизм всплытия, в JavaScript реализуется такой прием разработки как делегирование событий. Что это такое? Предположим, у нас есть вот такая страница с неким меню:
И мы, естественно, хотим обрабатывать клики по каждому из этих пунктов. Конечно, можно повесить обработчик на каждый элемент li. Но можно сделать лучше: повесить один общий обработчик на элемент ul, который благодаря механизму всплытия будет перехватывать все клики от дочерних элементов li.
Добавим в скрипт следующие строчки:
Теперь кликая по элементам li мы в консоли видим соответствующие строчки. Однако, если кликнуть между этими элементами, то сработает обработчик для ul и мы увидим все пункты меню. Это не то, что нам нужно. Поэтому немного перепишем обработчик:
Здесь метод closest вернем ближайший дочерний элемент li, а если его нет, то значение null. Далее, мы проверяем: если li равно null, то завершаем работу обработчика. Обновим документ и видим, что теперь все работает гораздо лучше.
Но нам в нашей задаче нужно не получать содержимое элементов li, а выполнять определенные действия при выборе того или иного пункта меню. Как это лучше сделать? В практике программирования на JavaScript существует один очень эффективный и элегантный способ решить эту задачу. Для этого нам понадобятся нестандартные атрибуты, начинающиеся с префикса data-. Добавим к нашим тегам li следующие параметры:
А в обработчике будем читать этот атрибут:
Теперь при клике по пункту меню будем получать команду, которую следует выполнить. Для удобства все эти команды можно прописать как методы некоторого объекта:
И вызывать их вот таким универсальным кодом:
Как видите, благодаря делегированию событий, получили довольно красивое и элегантное решение для обработки элементов пунктов меню, не привязанное к конкретной разметке. В дальнейшем можно относительно просто добавлять и менять это меню без существенной перестройки кода.
Кстати, используя прием с нестандартными атрибутами, в JavaScript удобно реализовывать обработчики общего назначения. Например, для отображения или сокрытия с экрана браузера некоторого элемента. Для примера, предположим, что у нас есть вот такая кнопка:
с атрибутом data-toggle-menu и значением main_menu. Создадим универсальный обработчик, который будет использовать этот атрибут, чтобы показать или скрыть элемент с указанным id:
Обратите внимание, что общий обработчик мы вешаем на объект document, который является корневым для DOM-дерева, то есть, все элементы внутри HTML-документа являются дочерними для этого объекта. Поэтому, когда событие всплывает до document, мы берем ссылку event.target на элемент, в котором событие произошло и смотрим значение его атрибута data-toggle-id. Если оно существует, то ищем элемент с указанным id, и если такой элемент находится, то меняем его видимость на противоположное значение. В результате наше меню то скрывается, то показывается.
Здесь может возникнуть вопрос: почему мы повесили универсальный обработчик через метод addEventListener, а не через свойство onclick объекта document? Дело в том, что на свойстве onclick уже может висеть какой-либо нужный обработчик и меняя его можно порушить работу сайта. Тогда как метод addEventListener лишь добавляет еще один обработчик к уже существующим и никаких дополнительных проблем это не должно вызывать. Особенно так удобно делать при разработке больших проектов, работая в команде: каждый программист может через addEventListener назначить свои обработчики и это никак не повлияет на работоспособность всего проекта.
Во второй части этого занятия рассмотрим события, которые браузер выполняет автоматически. Что это за события? Например, если мы вместо кнопки разместим вот такую ссылку:
то наш скрипт перестанет работать, так как браузер при клике будет выполнять переход к странице ex1.htm, то есть, перегружать текущий документ. Как сделать так, чтобы этого не происходило, то есть отменить действие браузера по умолчанию? Здесь есть два способа: наше событие onclick должно вернуть значение false:
или же выполнить метод event.preventDefault() в обработчике события:
Когда может понадобиться такое прерывание действия браузера по умолчанию? Предположим, что мы создаем контекстное меню для всего документа:
Далее, нам говорят, что нужно еще сделать отдельное контекстное меню для элементов главного меню. И мы добавляем в наш скрипт такие строчки:
Но при щелчке правой кнопкой мыши, мы теперь видим два контекстных меню, так как событие oncontextmenu всплыло до уровня document и там тоже сработал обработчик этого события. Естественным желанием будет остановить всплытие события:
- убрать строчку event.stopPropagation();
- и добавить первой строкой if (event.defaultPrevented) return; в document.addEventListener
Теперь наше событие продолжает всплывать, но контекстное меню документа будет отображаться, только если никакое другое ранее не было вызвано. Благодаря свойству
мы можем узнать было ли в дочерних элементах вызван метод
и если да, то defaultPrevented принимает значение true. Иначе, оно будет равно false. Как видите, все достаточно просто.
Последнее, что отметим на этом занятии, в методе addEventListener можно использовать вот такой необязательный третий аргумент:
который сигнализирует браузеру, что добавляемый обработчик события не собирается прерывать действие по умолчанию браузера. Например:
Здесь возникнет ошибка, так как мы вызываем event.preventDefault(), хотя указали, что не будем этого делать. Зачем вообще нужно заранее говорить JavaScript-машине, что мы не собираемся прерывать обработку события? Дело в том, что некоторые действия, вроде скроллинга документа, особенно на смартфонах, желательно выполнять быстро и без задержек. Чтобы увеличить время реакции мы можем сразу сказать, что можно делать скроллинг, не дожидаясь окончания обработки текущего события в нашем скрипте. В некоторых браузерах (Firefox, Chrome) это свойство установлено сразу по умолчанию и это следует учитывать при написании программ.
Итак, на этом занятии мы рассмотрели механизм делегирования событий и узнали как можно обрабатывать действия браузера по умолчанию.
Видео по теме
© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта
Возможно, вам уже когда-то встречалась в коде такая строка — evt.preventDefault() . Например, в интерактивных курсах по JavaScript. Давайте подробно разберём, зачем она нужна.
При разработке таких типичных элементов интерфейса, как форма или попап, часто нужно изменить поведение браузера по умолчанию. Допустим, при клике по ссылке мы хотим, чтобы открывался попап, но вместо этого браузер будет автоматически переходить по адресу, указанному в атрибуте href . Или вот другая проблема — мы хотим перед отправкой формы проверять корректность введённых данных, но после нажатия на кнопку submit форма каждый раз будет отправляться на сервер, даже если там куча ошибок. Такое поведение браузера нам не подходит, поэтому мы научимся его переопределять.
Объект события и метод preventDefault
Событие — это какое-то действие, произошедшее на странице. Например, клик, нажатие кнопки, движение мыши, отправка формы и так далее. Когда срабатывает событие, браузер создаёт объект события Event . Этот объект содержит всю информацию о событии. У него есть свои свойства и методы, с помощью которых можно эту информацию получить и использовать. Один из методов как раз позволяет отменить действие браузера по умолчанию — preventDefault() .
Event можно передать в функцию-обработчик события и в ней указать инструкции, которые должны быть выполнены, когда оно сработает. При передаче объекта события в обработчик обычно используется сокращённое написание — evt .
Пример: когда ссылка — не ссылка
Ранее мы уже говорили о попапе, который должен появляться при клике на ссылку — давайте разберём этот кейс на практике. Так будет выглядеть разметка в упрощённом виде:
Мы хотим при клике на ссылку click-button добавлять элементу с классом content класс show . Он сделает попап видимым, поменяв значение свойства display с none на block . Напишем логику добавления этого класса с помощью JavaScript:
Если мы уберём строку evt.preventDefault() , вместо попапа откроется отдельная страница pop-up.html , адрес которой прописан в атрибуте href у ссылки. Такая страница нужна, потому что мы хотим, чтобы вся функциональность сайта была доступна, если скрипт по какой-то причине не будет загружен. Именно поэтому мы изначально реализовали кнопку с помощью тега a , а не button . Но у нас с JavaScript всё в порядке, поэтому вместо отдельной страницы мы открыли попап, отменив действие браузера по умолчанию.
Пример: проверка формы перед отправкой
Разберём следующий кейс — отправку формы при нажатии на кнопку submit . Допустим, мы хотим перед отправкой проверять введённые данные, потому что в поле ввода обязательно должно быть значение 'Кекс' и никакое другое. Разметка формы:
При нажатии на кнопку «Готово» сработает событие отправки формы submit , и форма отправится вне зависимости от корректности введённого значения, поэтому мы должны перехватить отправку.
Неотменяемые события
Не для всех событий можно отменить действие по умолчанию. Например, событие прокручивания страницы scroll проигнорирует попытки отменить его. Чтобы узнать, можно отменить действие по умолчанию или нет, нужно обратиться к свойству cancelable объекта Event . Оно будет равно true , если событие можно отменить, и false — в обратном случае.
В статье мы разобрали базовые примеры, когда может понадобиться отмена действия браузера по умолчанию. В реальной разработке вы будете сталкиваться с такой необходимостью довольно часто — при сложной валидации форм, предотвращении ввода пользователем неверных символов, создании кастомного меню вместо стандартного (при клике правой кнопкой мыши) и так далее.
На этом уроке мы рассмотрим, как можно отменить стандартные действия браузера, которые происходят, когда пользователь взаимодействует с некоторыми элементами веб-страницы. Также узнаем как отмена стандартного действия, которое выполняет браузер, влияет не его всплытие.
Действия браузера по умолчанию
Имеется много различных событий, при наступлении которых браузер выполняет определённые стандартные действия:
- mousedown - запускает выделение при перемещение мыши;
- click на элементе <a href=". "> - переходит на указанный URL;
- click на <input type="checkbox"> - устанавливает или снимает флажок;
- click на кнопке с type="submit" или нажатие Enter внутри поля формы вызывает событие submit и отправляет форму на сервер;
- keydown - нажатие клавиши может привести к добавлению символа в поле или другим действиям;
- contextmenu - событие происходит при щелчке правой кнопкой мыши (выполняет отображение контекстного меню браузера и т.п.).
Иногда в процессе обработке этих событий вы хотите, чтобы браузер не выполнял соответствующее стандартное действие. Его необходимо отменить и вместо него выполнить другое действие. В JavaScript возможно отменить стандартное действие браузера, для этого используется метод preventDefault .
Отмена стандартного действия браузера
Отмена стандартного действия браузера осуществляется посредством вызова метода preventDefault в обработчике события.
Например, отменим стандартное действие для элемента а , имеющего id="myAnchor" :
Возможность отменять стандартные действия браузера очень часто применяются перед отправкой формы на сервер. Она используется для того чтобы проверить правильность заполнения формы с помощью скриптов JavaScript.
Влияет ли отмена стандартного действия, которое выполняет браузер, на его всплытие
В этом разделе мы рассмотрим следующий вопрос: "Влияет ли на всплытие события то, что мы отменили выполнение стандартного действия браузера, которое с ним связано?"
Чтобы разобраться в этом вопросе, давайте рассмотрим следующий пример:
Из этого примера видно, что отмена стандартного действия браузера (переход на страницу, указанную в атрибуте href , при нажатии на ссылку) не останавливает всплытие пузырька (события).
Следовательно, отмена стандартного действия браузера для некоторого события не влияет на всплытие пузырька (события), т.е. они выполняются не зависимо друг от друга
В ситуациях, когда Вам необходимо отменить стандартное действие браузера и всплытие события (пузырька), можно использовать следующий код:
Что такое действия браузера по умолчанию, и зачем их отменять в JavaScript? Как правило, это переходы по ссылкам, отправка формы по клику на кнопке типа submit . Также программным путем можно отменить выделение текста или заблокировать текстовое поле. Разберем несколько типичных вариантов отмены действий браузера по умолчанию в JavaScript. Начнем с ссылок.
Пример 1. Отмена перехода по ссылке.
В случае, когда вам нужно отменить действие по умолчанию, а это для ссылок загрузка страницы по адресу, указанному в атрибуте href , можно использовать метод объекта Event event.preventDefault() или написать return false . Есть еще один способ, который часто использовался ранее и в меньшей степени сейчас, - записать в атрибут href="javascript:void(0)" .
Рассмотрим пример, когда ссылки содержат код JavaScript в качестве атрибута onclick :
< 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 = "//html-plus.in.ua/obrabotka-sobytiya-onclick/" > Обычная ссылка < / a > < br >В первом случае вы перейдете по ссылке только, если нажмете "Ок" в диалоговом окне confirm() . Во втором и 3-м случае переход не состоится, а в последнем
Пример 2. Отображение модального окна при клике на ссылку
Второй пример, в котором при клике на ссылку нам не нужно никуда переходить - это создание модальных окон. В этом случае ссылка, как правило, выглядит, как якорь, т.е. ведет на html-элемент текущей страницы с определенным id . Однако такой элемент скрыт изначально, а показать его надо именно по клику на ссылке. Для того чтобы отменить переход, мы воспользуемся методом event.preventDefault() .
Разметка, стили и JavaScript-код примера представлены ниже.
< p > Текст до модального окна . Щелкните на ссылке , чтобы открыть модальное окно . < / p > modal . children [ 1 ] . innerHTML = 'Вы открыли модальное окно' ;Откройте модальное окно сами.
Модальное окно
Текст до модального окна. Щелкните на ссылке, чтобы открыть модальное окно.
Пример 3. Отменяем отправку формы
На рисунке показано, какие предупреждения выводит браузер Google Chrome при заполнении различных по типу полей при нажатии на кнопку с type="submit" .
Читайте также: