反击点击事件冒泡"横向",而不仅仅是"向上"

Question

我在组件中嵌套了click事件处理程序:

class ListItem extends React.Component {
    ...
    render() {
        return (
            <div onClick={this.save}>
              ...Content...
              <span onClick={this.onDeleteClick}> (Delete)</span>
            </div>
        );
    }
    ...
}

_{(这篇文章底部的完整,最小的例子.)}

此组件用作包含组件中的"列表项".当我点击(Delete)它时会onDeleteClick按预期触发,这会对父进行回调,从而导致组件从父组件中删除.然后点击事件按预期开始冒泡.但是,它会"向上"到父列表中的下一个组件.毕竟,删除处理程序已经删除了原始目标.

如果我添加e.stopPropagation()到onDeleteClick处理程序的顶部它一切正常,但我只是想了解为什么点击事件被传递到一个完全不同的组件,只是为了确保那里没有任何其他吸烟枪.

我当前的理论是,挂起事件队列以某种方式索引到虚拟DOM中,如果您在事件处理程序期间改变虚拟DOM,则冒泡事件可能会传递到虚拟DOM中的错误组件.我原本以为鼓泡事件根本不会发射,而不是射击一个完全不同的组件.

这是怎么回事？任何其他见解？这是一个有缺陷的设计,如果是这样,有关替代品的任何建议吗？

---

以下是显示问题的最小示例:https://codepen.io/mgalgs/pen/dRJJyB

这是固定版本:https://codepen.io/mgalgs/pen/KqZBKp

"修复"的完整差异是:

--- orig.jsx
+++ new.jsx
@@ -32,6 +32,7 @@
     }

     onDeleteClick(e) {
+        e.stopPropagation();
         this.props.onDeleteClick(e);
     }
 }

Answer 1

+1 感谢您提出一个有趣的问题。

该行为似乎符合W3C 的建议：

从事件目标到树顶部的 EventTargets 链是在事件初始分派之前确定的。如果在事件处理期间树发生修改，事件流将基于树的初始状态继续进行。

这可能在某种程度上解释了这里发生的事情。在气泡传播到父元素之前，DOM 树似乎已被修改，此时事件将针对树中该位置的元素（如果有）。

在此上下文中，触发事件的元素将从树中删除。事件不是冒泡到下一个元素，而是冒泡到现在已在初始元素所在的元素集合中占据其位置的元素（如果有）。