Статьи

Остановить функции событий jQuery

Февраль 22, 2019

Простой способ остановить функцию jQuery или JavaScript в ее треках — использовать возвращаемую ложную строку. В большинстве случаев это не лучший способ, и есть другие функции, которые следует использовать.

См. Также: остановка функций событий jQuery.

Возвращаем ложный пример

Просто используйте строку возврата false, чтобы остановить функцию и вернуть управление вызывающей функции или элементу страницы. Эта функция jQuery переключает скрытие и отображение #htmlelement, а затем запрещает браузеру посещать элемент href по нажатой гиперссылке 

$("a.toggle").click(function () { $("#htmlelement").toggle(); // hide/show toggle return false; // Prevent browser from visiting the href });

Другие варианты, чтобы рассмотреть:

  • return false;
  • preventDefault()
  • stopPropagation ()
  • stopImmediatePropagation()

Какой метод вы должны использовать?

return false;

Используйте только тогда, когда другие варианты не применимы или когда вы не уверены или отчаялись.

preventDefault()

Используется, когда вам нужно отменить поведение по умолчанию, например, гиперссылку, сочетание клавиш, событие и т. Д. Также требуется, чтобы вы разрешали доступ к параметру события в вашем обратном вызове (в этом примере я использую e ): 

 $("a").click(function (e) { // e == our event data e.preventDefault(); });

stopPropagation()

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

 $("a").click(function () { // Do nothing }); $("#dohyperlinksdiv a").click(function (e) { // Don't cancel the browser's default action // and don't bubble this event! e.stopPropagation(); });


stopImmediatePropagation()

Хорошая функция, чтобы остановить все будущие связанные события. События будут срабатывать в том порядке, в котором они были связаны, и когда она попадает в функцию stopImmediatePropagation (), все дальнейшие связанные события не запускаются. 

 $("div a").click(function () { // Do something }); $("div a").click(function (e) { // Do something else e.stopImmediatePropagation(); }); $("div a").click(function () { // THIS NEVER FIRES }); $("div").click(function () { // THIS NEVER FIRES });

Вывод

Не используйте return false, если только вам это не нужно, поскольку это обеспечивает плохую отмену, и не забывайте предотвращать действия элементов по умолчанию перед выходом из функции. Давайте сохраним наше кодирование красиво и аккуратно!

117
Share: