Javascript 多个层次结构中的事件句柄进行响应

我有一个包裹按钮的第三方组件：

<ExtComponent> <!-- this component has it's own internal onClick handler -->
  <button />
</ExtComponent>

没有调用我的组件onClick

有没有办法先处理子组件（按钮）onClick，然后继续（或不继续）处理ExtComponent onClick

---

（假设我可以更改第三方组件（我可以分叉并更改它））

您不需要从组件中删除或更新单击处理程序。不要让这件事发生

如果按钮是在具有单击处理程序的div中呈现的，那么您可以访问该div

onClick: function(event) {
  event.stopPropagation();
  // now handle the click
}

如果您希望允许事件在某种条件下传播，那么不要停止传播

onClick: function(event) {
  if(this.prop.foo == 'bar') {
    event.stopPropagation();
  } else {
    // let the event trigger the upper event listeners too
  }
}

---

可能重复-不清楚你在问什么。单击按钮调用了错误的处理程序，还是根本没有触发？您能否提供一个示例，说明呈现组件后HTML是什么样子？@DanPrince这是一个更一般的问题，我更新了问题，使其更清晰我知道，但即使在一般情况下，React组件也不能有响应单击的事件处理程序，因为它们没有呈现到DOM中。哪个元素是附加到的内部单击处理程序，以及它与按钮之间的层次关系是什么？@DanPrince

ExtComponent

最终被渲染成一个带有

onClick

处理程序的

，该处理程序打开某种对话框。我想有条件地打开该对话框，这取决于一些道具，但由于我无法访问我询问的元素，似乎我遇到了一个问题，阻止了我的内部组件注册单击事件。修复了这个问题，我看到了，就像你说的，从内到外的均匀气泡，我可以使用

stopPropagation

来阻止它。对此表示抱歉，并感谢您为我指明了正确的方向：-）

onClick: function(event) {
  if(this.prop.foo == 'bar') {
    event.stopPropagation();
  } else {
    // let the event trigger the upper event listeners too
  }
}