如何防止 React onClick 事件被孩子消费答案

【问题标题】：How to prevent a React onClick event from being consumed by child如何防止 React onClick 事件被孩子消费
【发布时间】：2015-01-01 20:15:56
【问题描述】：

我有一个带有 onClick 处理程序的 React 组件。

该组件由多个子组件组成，包括一个呈现 Highcharts 图表的子组件。

如果我单击组件上的任何位置而不是 Hichcharts 视图，则按预期触发 onClick。如果我单击图表，则不会触发 onClick。

我该如何解决这个问题？

【问题讨论】：

Highcharts 可能正在消耗点击事件。渲染 Highchart 的组件可以在渲染图表时将其 onclick 处理程序的引用传递给 chart.events.click。

【解决方案1】：

对我来说最干净的解决方案是使用绝对定位在高图上方渲染一个透明 div。

透明的 div 首先获取事件，并且完全由 React 处理。这解决了所有问题。

【讨论】：