祖先的事件處理程序可以停止其子元素事件之一的傳播嗎？

Question

我希望有人能幫助我理解爲什麼下面的情況失敗。我有一個父級ul標籤，它帶有一個事件處理程序，它爲嵌套在其中的另一個ul標籤中的給定後代li元素定義條件。標記是：

<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

事件冒泡傳播可以在沿着祖先鏈的任何點停止，並且將停止事件傳播到其他祖先。

而且，只有在某些情況下才有條件停止傳播沒有問題。

---

我認爲你的一些混淆只是與你的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。