Может ли обработчик событий предков остановить распространение одного из событий его дочернего элемента?

Question

Я надеюсь, что кто-то может помочь мне понять, почему сценарий ниже терпит неудачу. У меня есть родительский тег ul с обработчиком событий, который создает условия для данного элемента li потомства в другом теге ul, вложенном в него. Разметка:

<ul id="outerUL"> 
    <li>LIST ITEM 1</li> 
    <li>LIST ITEM 2</li> 
    <li> 
     <ul id="innerUL"> 
      <li>LIST ITEM 3</li> 
      <li>LIST ITEM 4</li> 
      <li> 
       <ul id="inMostUL"> 
        <li>LIST ITEM 5</li> 
        <li>LIST ITEM 6</li><!-- we condition for this element --> 
        <li>LIST ITEM 7</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

Javascript является: (это кажется условным .stopPropagation() при вызове метода предка не может ...)

var outerMostUL = document.getElementById("outerUL"); 
outerMostUL.addEventListener('click', 
    function(e){ 

     if(e.target.innerHTML === "LIST ITEM 6"){ 
      e.stopPropagation(); 
      alert("you clicked LIST ITEM 6. Event travel stops."); 
      // return; // a return WILL work 
     } 

    // below runs if propagation continues... 
    alert("outerMostUL event handler fired!"); 

    }, 
    false); 

Теперь, если я решил положить в сдержанный. addEventListener вызова() на что Ли тег, .stopPropagation() работает, как ожидалось, например:

// A discreet event handler does work 
var inMostUL = document.getElementById("inMostUL"); 
inMostUL.children[1].addEventListener('click', function(e){ 

    e.stopPropagation(); 
    alert("The descendent event fires, but stops now."); 

}); 

так что мой вопрос: вы должны быть в состоянии использовать состояние в обработчике предка для данного e.target и прекратить распространение накануне nt, если активируется барботирование? Кажется, что у элемента должен быть свой собственный обработчик, связанный с возникновением события, но, возможно, я путаю распространяющееся событие, перемещающее цепочку предков, фактически добавляя прослушиватель событий через этот метод. Любое световое излучение будет оценено по достоинству. Я просто пытаюсь концептуализировать обработку событий js с помощью простых примеров. Спасибо за любое рассмотрение этого.

Answer 1

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

И нет никаких проблем с остановкой распространения условно только при определенных обстоятельствах.

---

Я думаю, что некоторые из ваших замешательств связаны только с вашей функцией javascript, а не с распространением. В этом коде:

var outerMostUL = document.getElementById("outerUL"); 
outerMostUL.addEventListener('click', function(e){ 
    if(e.target.innerHTML === "LIST ITEM 6"){ 
     e.stopPropagation(); 
     alert("you clicked LIST ITEM 6. Event travel stops."); 
    } 
    // below runs ALWAYS, regardless of the result of the previous "if" statement 
    alert("outerMostUL event handler fired!"); 
}, false); 

Второе предупреждение происходит без return заявления не из-за распространения, но только потому, что ваш Javascript функция продолжает выполняться после условного if блока. Это не имеет ничего общего с распространением, а просто с потоком программы javascript. Если вы добавите оператор return, вы заканчиваете обратный вызов обработчика событий раньше, так что остальная часть его не будет выполнена. Без оператора return выполнение этой функции продолжается после того, как блок if выполнит запрос if или нет.

---

При распространении концептуально пониманием событий, просто подумайте о куске кода в браузере, который инициирует событие, пузырь. Это событие сначала отправляется обработчику события целевого объекта, и если распространение там не отменяется, оно затем отправляется следующему предку, и если распространение там не отменяется, оно затем отправляется по цепочке предков, пока оно не будет попадает на объект document или пока распространение не отменяется.

---

Кроме того, имейте в виду, что если вы не используете кроссплатформенной библиотеки, как JQuery и вы хотите, чтобы поддерживать старые версии IE, что остановка распространения работает по-разному в этих старых версиях IE.