在元素而非子元素上设置点击处理程序事件的反应方式

Question

通过以下方式设置onClick事件时：

<button type="button" field={this.props.name} onClick={this.props.add_item}>
<i className="fa fa-plus"></i>
</button> 

最后，我想从事件目标中获取field属性。

现在的问题是：当我单击按钮区域时，我将获得字段属性，但是当单击子级时，它也会触发事件，但会触发事件，但来自另一个目标元素（它没有字段属性； ...我可以设置课程）。 但是，有没有更好的方法可以使整个元素从相同的目标或类似的目标触发？

Answer 1

我认为您应该使用event.currentTarget而不是event.target

Answer 2

您可以通过在子元素中调用event.stopPropagation()绑定另一个单击处理程序，从而在单击子event.stopPropagation()和父event.stopPropagation()触发父单击处理程序。
如果您使用的是新浏览器，则将以下CSS应用于<i>元素应该可以解决该问题：

pointer-events: none;

请参阅浏览器兼容性 。