jQuery - Как обойти глобальное событие - PullRequest
Новая
       9

jQuery - Как обойти глобальное событие

1 голос
/ 16 апреля 2020

На моем сайте происходит глобальное событие, которое срабатывает при каждом вызове ajax. 

$(document).ajaxStart(function (event, xhr, settings) {
    ShowLoader();
});

На сайте имеется множество функций ajax и, следовательно, глобальный метод.

И на моем сайте появилась новая функция новостной ленты, где пользователь может нажать на кнопку, чтобы увидеть ленту новостей. Эта услуга предоставляется третьей стороной, которая попросила меня разместить сценарий и добавить к кнопке класс btn-NewsFeed, например: 

<script type="text/javascript" src="url to a third party javascript"></script>
   <a class="btn btn-NewsFeed">
      Get News Feed
   </a>

При щелчке привязки выполняется вызов ajax, но этот метод находится во внешнем файле, который я не могу изменить.

Однако я могу добавить другой класс и написать событие щелчка для этого тега привязки на моем сайте.

Есть ли способ, чтобы просто остановите глобальное событие для этого щелчка якоря и все еще не нарушайте его функциональность.

Ответы [ 2 ]

2 голосов
/ 16 апреля 2020

Вы можете сделать это в вашей глобальной функции обработчика событий, что-то вроде этого: 

$(document).ajaxStart(function (event, xhr, settings) {
   if ($(event.target).hasClass('btn-Newsfeed')) { 
     return;
   }
   ShowLoader();
});

edit

Это не будет работать, так как это не обработчик .on('click'), ..., где у вас есть элемент. Таким образом, вы должны сделать что-то другое.

Вы можете установить global в false, тогда этот метод не будет запускаться, как согласно документации (вам необходимо прокрутить вниз до «Дополнительные заметки»:

Если вызывается $.ajax() или $.ajaxSetup() с параметром global, установленным на false, метод .ajaxStart() не будет запускаться.

Редактировать: необходимы дополнительные пояснения. Прочитайте документацию jQuery. ajax. Здесь вы видите параметр global, который по умолчанию имеет значение true. Установите для этого параметра значение false, чтобы не запускать .ajaxStart()

1 голос
/ 16 апреля 2020

Вы можете использовать event.target.activeElement, чтобы найти, какой элемент в данный момент имеет фокус, и на основе этой проверки, имеет ли этот элемент также класс btn-NewsFeed. Если true, просто вернитесь из метода ajaxStart, чтобы функция ShowLoader() никогда не вызывалась, иначе продолжайте с ней. 

$(document).ajaxStart(function(event, xhr, settings) {
  if ($(event.target.activeElement).hasClass("btn-NewsFeed")) return;
  ShowLoader();
});

function ShowLoader() {
  console.log('ShowLoader called!')
}

$('.btn-NewsFeed').click(function(e) {
  e.preventDefault();
  console.clear();

  $.getJSON("https://jsonplaceholder.typicode.com/todos/1", function(data) {
    console.log('Title: ', data.title)
  });
});
$('.btn-HomeFeed').click(function(e) {
  e.preventDefault();
  console.clear();

  $.getJSON("https://jsonplaceholder.typicode.com/todos/2", function(data) {
    console.log('Title: ', data.title)
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btn btn-HomeFeed" href="#">Get Home Feed</a><br>
<a class="btn btn-NewsFeed" href="#">Get News Feed</a>
...