Как остановить событие пузыря с jquery жить?

Ответ 1

Короткий ответ прост, вы не можете.

Эта проблема

Обычно вы можете остановить "всплывающее" событие для обработчиков событий на внешних элементах, потому что обработчики для внутренних элементов вызываются первыми. Однако 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);
});

Ответ 2

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

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

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

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

Ответ 3

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

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

  AddApointment(this);
});

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

Ответ 4

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

if(event.target != this)return; // stop event bubbling for "live" event

Ответ 5

Я использую

e.stopPropagation(); // to prevent event from bubbling up
e.preventDefault(); // then cancel the event (if it cancelable)

Ответ 6

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

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...
}

Таким образом, мое живое событие только "запускается", когда нажимается конкретный тип элемента /classname attr.

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

Ответ 7

Simply use **"on"** function to bind click event of child as well as parent element.

Example :  $("#content-container").on("click","a.childElement",function(e){
                   alert("child clicked");
                   e.stopPropagation() ; 
                }); 

                $("#content-container").on("click","div.parentElement",function(e){
                  alert("parent clicked");
                }); 
( where content-container is the outer div containing both parent as well as child elements. )

        Here only "child clicked" alert will occur.

    Thanks.