Как остановить распространение событий с живым jQuery?
Я пытаюсь остановить некоторые события, но stopPropagation не работает с "живым", таким образом, я не уверен, что сделать. Я нашел это на их сайте.
Прямые трансляции не пузырятся традиционным способом и не могут быть остановлены с помощью stopPropagation или stopImmediatePropagation. Например, возьмите случай двух событий щелчка - один связанный к "литию" и другому "литию a". Если щелчок происходит на внутренней привязке будут инициированы, ОБА события. Это вызвано тем, что когда $ ("литий") .bind ("щелчок", 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 просто делает некоторое ui диалоговое окно.
Теперь живой код (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>
3 ответа
Короткий ответ: нельзя .
Проблема
Обычно на внешних элементах можно остановить "пузырьки" на обработчиках событий, так как обработчики внутренних элементов сначала называются . Однако, "живые события" jQuery работают, прикрепляя к элементу документа обработчик нужного события, а затем вызывая соответствующий пользовательский обработчик (обработчики) после того, как событие всплывает в документе .
(источник: shog9.com)
Это обычно делает "живое" связывание достаточно эффективным средством связывания событий, но оно имеет два больших побочных эффекта: во-первых, любой обработчик события, прикрепленный к внутреннему элементу, может предотвратить обстрел "живого" события для себя или любого из своих дочерних элементов; во-вторых, обработчик события не может предотвратить обстрел любого обработчика события, прикрепленного непосредственно к дочерним элементам документа. Вы можете остановить дальнейшую обработку, но вы не можете ничего сделать с обработкой, которая уже произошла.... И к моменту запуска события в реальном времени, обработчик, прикрепленный непосредственно к дочернему устройству уже был вызван.
Решение
Вашим лучшим вариантом здесь (насколько я могу судить по тому, что вы опубликовали) является использование привязки в реальном времени для обоих обработчиков щелчков мыши. Как только это будет сделано, вы сможете вернуть 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);
});
Может быть, вы могли бы проверить, что событие щелчка не произошло на элементе a:
$('#CalendarBody .DateBox').click(function(e) {
// if the event target is an <a> don't process:
if ($(e.target).is('a')) return;
AddApointment(this);
});
Может сработать?
.Я использую
e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it's cancelable)