При обновлении веб-страницы или веб-сайта бывают ситуации, когда некоторые включенные ссылки больше не нужны или становятся неактуальными. Кроме того, эффективное управление трафиком конкретного веб-сайта. В таких случаях отмена событий в JavaScript творит чудеса, отключая некоторые функции и обрабатывая такие сценарии.
Как отменить события в JavaScript?
Для отмены событий в JavaScript можно использовать следующие подходы:
-
- “ предотвратить по умолчанию () метод.
- “ Логическое значение ' подход.
- “ остановить распространение () метод.
Подход 1: отмена событий в JavaScript с использованием метода preventDefault()
“ предотвратить по умолчанию () ” отменяет прикрепленное событие, если оно может быть отменено. Этот метод можно использовать для отделения прикрепленного события от доступной ссылки, тем самым предотвращая выполнение действия.
Синтаксис
event.preventDefault ( )
В заданном синтаксисе:
-
- “ мероприятие ” относится к отсоединяемому событию.
Пример
Пройдите приведенный ниже фрагмент кода:
< h3 > Событие Click будет отменено ! h3 >
< а я бы знак равно 'сайт' href знак равно 'https://www.google.com/' > Посетите веб-сайт Google а >
документ.getElementById ( 'сайт' ) .addEventListener ( 'щелкнуть' , функция ( отменить ) {
cancel.preventDefault ( ) ;
} ) ;
Выполните следующие шаги:
-
- Во-первых, включите указанный заголовок, который будет отображаться в объектной модели документа (DOM).
- После этого укажите « URL-адрес ' с использованием ' href атрибут.
- Теперь в части кода JavaScript получите доступ к указанному URL-адресу.
- Также прикрепите « нажмите ” с URL-адресом с помощью функции, использующей “ добавить прослушиватель событий () метод.
- Наконец, « предотвратить по умолчанию () ” будет применен метод с помощью параметра функции для отсоединения прикрепленного события.
Выход
Подход 2: отмена событий в JavaScript путем возврата логического значения
Этот подход может быть реализован путем возврата « ЛОЖЬ ” логическое значение при инициированном событии.
Пример
Следующие строки кода демонстрируют заявленную концепцию:
< центр >< вход тип знак равно 'текст' заполнитель знак равно «Введите текст» на входе знак равно 'отменить событие()' > центр >функция отменитьсобытие ( ) {
возвращаться ЛОЖЬ ;
тревога ( 'Это утверждение не будет отображаться' )
}
В приведенном выше фрагменте кода:
-
- Во-первых, в рамках « <центр> », выделить текстовое поле ввода.
- Также прикрепите « на входе ” событие с указанным “ заполнитель ' ценность. Это приведет к вызову указанной функции при вводе текста.
- Теперь в части кода JavaScript объявите функцию с именем « отменитьСобытие() ». В его определении вернуть логическое значение « ЛОЖЬ ” для отмены включенного “ мероприятие ».
- Наконец, укажите заявленное сообщение в поле предупреждения. Возвращаемое логическое значение приведет к тому, что диалоговое окно не будет отображаться.
Выход
В приведенном выше выводе видно, что при доступе к функции диалоговое окно предупреждения не отображается, что отменяет прикрепленное событие.
Подход 3: отмена событий в JavaScript с использованием метода stopPropagation()
“ остановить распространение () ” предотвращает распространение одного и того же события. Этот метод можно использовать для остановки распространения между двумя div при установке флажка.
Синтаксис
event.stopPropagation ( )
Пример
Обратите внимание на следующие строки кода:
< центр >< h3 > Нажмите на веб-сайт, чтобы увидеть изменения: h3 >< див по щелчку знак равно 'элемент2()' > линукс
< див по щелчку знак равно 'элемент1 (событие)' > Веб-сайт див >
див >
< бр >
Отметьте, чтобы остановить распространение:
< вход тип знак равно 'флажок' я бы знак равно 'Проверьте' >
центр >
-
- На первом шаге аналогичным образом включаем заявленный заголовок.
- Теперь включите два « див » теги с прикрепленными « по щелчку », каждое из которых вызывает две разные функции element2() и element1().
- Также включите флажок с указанным идентификатором. Этот флажок приведет к остановке распространения между двумя элементами div.
Теперь взгляните на следующие строки кода JavaScript:
функция элемент1 ( а также ) {тревога ( «Вы нажали на веб-сайт» ) ;
если ( документ.getElementById ( 'Проверьте' ) .checked ) {
e.stopPropagation ( ) ;
}
}
функция элемент2 ( ) {
тревога ( «Вы нажали Linuxhint» ) ;
}
В приведенном выше js-коде:
-
- Определите функцию с именем « элемент1() ». Здесь параметр « а также » относится к « мероприятие », указанный в HTML-части кода.
- В своем определении отображать диалоговое окно предупреждения с указанным сообщением.
- После этого получите доступ к созданному флажку по его id с помощью « получитьэлемент по идентификатору() метод. Также примените « проверил ” к нему, чтобы проверить состояние отмеченного флажка.
- Затем примените « остановить распространение () ' метод, ссылающийся на параметр ' а также ». Это приведет к остановке распространения от одной функции к другой функции.
- Точно так же определите другую функцию « элемент2() для распространения. Эта функция будет работать только до распространения.
Выход
Здесь наблюдает за поведением при нажатии на div при установке флажка.
Мы собрали подходы к отмене событий в JavaScript.
Вывод
“ предотвратить по умолчанию () », метод « логическое значение 'подход' или ' остановить распространение () ” можно использовать для отмены событий в JavaScript. Первый метод может быть реализован для отсоединения прикрепленного события, что приводит к отключению ссылки. Подход с логическим значением возвращает « ЛОЖЬ ” логическое значение при инициированном событии. Метод stopPropagation() может применяться для остановки распространения между двумя div с помощью установленного флажка. В этом руководстве объясняется, как отменить события в JavaScript.