Вопрос о живом событии

Question

Я только что прочитал http://api.jquery.com/event.stopPropagation/

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

Я был немного смущен этим утверждением. Может ли кто-нибудь объяснить мне то же самое на каком-то примере?

Answer 1

Метод Live привязывает обработчик к документу и определяет, какой элемент вызвал событие, из свойства event.target.

Таким образом, фактический обработчик находится наверху ( в терминах иерархии ).

stopPropagation останавливает всплывание пузырьков вверх по иерархии DOM, но поскольку обработчик уже находится на вершине ( в .live случае ), нет места для всплытия ..

---

пример попытки ..

- document
  - div
    - link

вы связываете обработчик события щелчка со ссылкой ( с помощью метода bind или click ).

Когда вы щелкаете ссылку, запускается обработчик, но, кроме того, событие щелчка поднимается вверх по DOM, пока не достигнет документа, а также вызовет обработчики щелчка, связанные с div и документом. (, если вы не используете .stopPropagation)

В качестве альтернативы, если вы используете метод .live для привязки обработчика событий, он будет привязан к документу. Если сейчас щелкнуть ссылку, событие (, которое не сработает сразу, поскольку с ним не связан ни один обработчик ) естественным образом поднимется по DOM (, вызывая обработчики нажатий, с которыми он сталкивается ). ). Как только он достигает документа, он запускает наш собственный обработчик. Но нет никакого верхнего, чтобы пойти, поэтому stopPropagation бесполезен в этом пункте.

Answer 2

HTML:

<div id="outer">
   <div id="inner">
       <span>.live() version</span>
   </div>
</div>

<div id="outer2">
   <div id="inner2">
       <span>.delegate() version</span>
   </div>
</div>

JS:

$(function(){

   $('#inner2').delegate('span', 'click', function(e){
      e.stopPropagation(); // indeed, no alert!
   });

   $('span').live('click', function(e){
      e.stopPropagation();
      // we would expect the propagation to stop here, so no alert, right?
   });

   $('#outer2, #outer').click(function(){ alert("Don't reach me!"); });

});

Пример: http://jsfiddle.net/knr3v/2/

.live() делает свое волшебство только после того, как событие уже всплыло, поэтому останавливать распространение события бесполезно - слишком поздно, оно уже достигло вершины дерева и распространилось ...