Как остановить всплытие событий с помощью jquery live?

Я пытаюсь остановить некоторые события, но stopPropagation не работает с «живым», поэтому я не уверен, что делать. Я нашел это на их сайте.

События Live не всплывают традиционным способом, и их нельзя остановить с помощью stopPropagation или stopImmediatePropagation. Например, возьмем два события щелчка — одно связано с «li», а другое — с «li a». Если произойдет щелчок по внутреннему якорю, будут запущены ОБА события. Это потому, что когда $("li").bind("click", fn); связан, вы на самом деле говорите: «Всякий раз, когда событие щелчка происходит в элементе LI - или внутри элемента LI - запускайте это событие щелчка». Чтобы остановить дальнейшую обработку живого события, fn должна возвращать false.

В нем говорится, что fn должен возвращать false, поэтому я пытался сделать

 $('.MoreAppointments').live('click', function(e) {
   alert("Hi");
   return false;
 });

но это не сработало, поэтому я не уверен, как заставить его возвращать false.

Обновить

Вот еще информация.

У меня есть ячейка таблицы, и я привязываю к ней событие клика.

 $('#CalendarBody .DateBox').click(function(e)
    {
        AddApointment(this);
    });

Таким образом, AddApointment просто создает диалоговое окно пользовательского интерфейса.

Теперь живой код (MoreAppointments) находится в этой ячейке таблицы и в основном является тегом привязки. Поэтому, когда я нажимаю на тег привязки, он сначала переходит к приведенному выше коду (addApointment - поэтому сначала запускает это событие), запускает его, но не запускает мое диалоговое окно, вместо этого он переходит прямо к событию (MoreAppointment) и запускает этот код. Как только этот код запущен, он запускает диалоговое окно из «addApointment».

Обновление 2

Вот часть html. Я не копировал всю таблицу, так как она довольно большая и все ячейки повторяются с одними и теми же данными. Если нужно, выложу.

 <td id="c_12012009" class="DateBox">
        <div class="DateLabel">
            1</div>
        <div class="appointmentContainer">
            <a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a><a class="appointments">Fkafkafk fakfka kf414<br />
            </a>
        </div>
        <div class="appointmentOverflowContainer">
            <div>
                <a class="MoreAppointments">+1 More</a></div>
        </div>
    </td>

javascript jquery dom event-delegation
person chobo2    schedule 28.12.2009    source источник
comment
Как выглядит ваша разметка?   -  person cletus    schedule 28.12.2009

Ответы (6)


arrow_upward
52
arrow_downward

Короткий ответ: вы не можете.

Эта проблема

Как правило, вы можете не допустить всплытия события к обработчикам событий внешних элементов, потому что обработчики внутренних элементов вызываются first. Однако интерактивные события jQuery работают, прикрепляя прокси-обработчик для желаемого события к элементу документа, а затем вызывая соответствующий пользовательский обработчик (обработчики) после того, как событие всплывает в документе.

Пузырящаяся иллюстрация
(источник: shog9.com)

Обычно это делает живое связывание довольно эффективным средством связывания событий, но у него есть два больших побочных эффекта: во-первых, любой обработчик событий, прикрепленный к внутреннему элементу, может предотвратить срабатывание живых событий для себя или любого из его дочерних элементов; во-вторых, обработчик активных событий не может предотвратить срабатывание каких-либо обработчиков событий, прикрепленных непосредственно к дочерним элементам документа. Вы можете остановить дальнейшую обработку, но вы ничего не можете сделать с обработкой, которая уже произошла... И к тому времени, когда ваше живое событие срабатывает, обработчик, прикрепленный непосредственно к дочернему элементу, уже вызван.

Решение

Ваш лучший вариант здесь (насколько я могу судить по тому, что вы опубликовали) - использовать живую привязку для обоих обработчиков кликов. После этого вы сможете return false из обработчика .MoreAppointments предотвратить вызов обработчика .DateBox.

Пример:

$('.MoreAppointments').live('click', function(e) 
{
  alert("Hi");
  return false; // prevent additional live handlers from firing
});

// use live binding to allow the above handler to preempt
$('#CalendarBody .DateBox').live('click', function(e)
{
   AddApointment(this);
});
person Shog9    schedule 28.12.2009
comment
Вау, в этом столько смысла. Теперь мне нужно выбрать лучший ответ, который ваш ответ объясняет, как в прямом эфире работает с всплытием событий, и дает решение. Или решение gnarf, которое не вносит изменений в мой код и тоже работает, но в будущих случаях теперь может работать. - person chobo2; 28.12.2009
comment
В event.stopPropagation это тоже упоминается: api.jquery.com/event.stopPropagation - person Kzqai; 14.10.2011

arrow_upward
7
arrow_downward

Я использовал такой код if, и он работал у меня:

$('#some-link').live('click', function(e) {
    alert("Link clicked 1");
    e.stopImmediatePropagation();
});

$('#some-link').live('click', function(e) {
    alert("Link clicked 2");    
});

так что мне кажется, что теперь JQuery поддерживает stopImmediatePropagation с живыми событиями

person Andrey Zavarin    schedule 09.08.2011

arrow_upward
5
arrow_downward

Возможно, вы могли бы проверить, что событие щелчка не произошло для элемента a:

$('#CalendarBody .DateBox').click(function(e) {
  // if the event target is an <a> don't process:
  if ($(e.target).is('a')) return;

  AddApointment(this);
});

Может работать?

person gnarf    schedule 28.12.2009
comment
Кажется, это работает, просто нужно провести еще несколько тестов. Однако мне интересно, может ли быть ситуация, когда событие щелчка само по себе является тегом привязки, и оно не позволяет самому себе вызывать остальную часть кода. Но опять же, я ничего не знаю об этой цели, так что это может вообще не быть проблемой. - person chobo2; 28.12.2009
comment
Из любопытства, будет ли эта строка: if ($(this).is('a')) return; отличаться от строки в вашем ответе? - person Hubro; 13.06.2012
comment
@Codemonkey - Да, это было бы ... event.target всегда указывает на фактическую вещь, на которую нажали, где this будет .DateBox - контейнером, в который вы также привязали событие. - person gnarf; 15.06.2012

arrow_upward
3
arrow_downward

Я использую это:

if(event.target != this)return; // stop event bubbling for "live" event
person RainChen    schedule 26.03.2012
comment
$('#some-link').live('click', function(e) { if(e.target!= this)return; } - person RainChen; 30.07.2012

arrow_upward
1
arrow_downward

я использую

e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it's cancelable)
person shinkou    schedule 28.12.2009

arrow_upward
1
arrow_downward

Я использовал это в определенных ситуациях. Примечание: применимо не всегда, поэтому всегда оценивайте свои потребности:

HTML:

<a href="#" className="my-class-name">Click me</a>

js (в вашем обработчике событий в реальном времени):

if(e.target.className == 'my-class-name') {
    e.preventDefault();
    // do something you want to do...
}

Таким образом, мое живое событие «запускается» только при щелчке по атрибуту определенного типа элемента/имени класса.

e.preventDefault() здесь, чтобы остановить ссылку, которую я нажимаю, перемещая положение прокрутки в верхнюю часть страницы.

person Dave    schedule 28.02.2013