在元素上设置单击处理程序事件的反应方式，而不是其子元素

Question

以下列方式设置onClick事件时：

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

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

现在问题：当我点击按钮区域时，我将获得字段属性，但是当点击子项时它也会触发事件，但是来自不同的目标元素（它没有字段属性; ...我当然可以。）但是，有没有更好的方法让整个元素从同一个目标或类似的东西触发？

Answer 1

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

Answer 2

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

pointer-events: none;

请参阅browser compatibility。