首页 文章

反击点击事件冒泡“横向”，而不仅仅是“向上”

提问于
浏览 次
6

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

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

（这篇文章底部的完整，最小的例子 . ）

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

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

我当前的理论是，挂起事件队列以某种方式索引到虚拟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);
     }
 }
javascript reactjs events virtual-dom

1 回答

  • 3

    1感谢您发布一个有趣的问题 .

    该行为似乎与W3C's recommendations内联：

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

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

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

    回复于

相关问题