javascript - 祖先的事件处理程序能否停止其子元素事件之一的传播？

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);

现在，如果我决定对 li 标签进行谨慎的 .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 使用条件并停止传播其事件？似乎一个元素必须有自己的处理程序绑定(bind)才能发起一个事件，但也许我混淆了传播事件在祖先链中传播与通过该方法实际添加事件监听器。任何光线脱落将不胜感激。我只是想通过简单的例子来概念化 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 block 之后继续执行。这与传播无关，仅与 javascript 程序流程有关。如果添加 return 语句，您将提前结束事件处理程序回调，因此不会执行其余部分。如果没有 return 语句，该函数的执行将在 if block 之后继续执行，无论是否满足 if 语句。

---

在概念上理解事件传播时，只需想想浏览器中启动冒泡事件的一段代码。该事件首先被发送到目标对象的事件处理程序，如果那里的传播没有被取消，它就会被发送到下一个祖先，如果那里的传播没有被取消，它就会沿着祖先链向上发送，直到它到达 document 对象或直到传播被取消。

---

此外，请记住，如果您没有使用像 jQuery 这样的跨平台库，并且您想要支持旧版本的 IE，那么在这些旧版本的 IE 中停止传播的方式会有所不同。