React way of setting click handler event on element but not its children

Question

When setting the onClick event in the following way:

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

In the end I want to get the field attribute from the event target.

Now the problem: When I click on the button area i'll get the field attribute, but when clicked the child it also triggers the event but from a different target element (it has no field attribute; ...which I could set of course). But isn't there a better way to make the whole element trigger from the same target or something like that?

banna · Accepted Answer · 2017-10-10 20:34:06Z

1

I think you should use event.currentTarget instead of event.target

answered Oct 10, 2017 at 20:34

banna

2592 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dane · Accepted Answer · 2017-10-10 20:16:26Z

You can make the parent click handler to be fired on clicking both the child and parent by binding another click handler in the child element calling event.stopPropagation().
If you are using new browsers, then applying the following CSS to your <i> element should solve the problem:

pointer-events: none;

See browser compatibility.

Collectives™ on Stack Overflow

React way of setting click handler event on element but not its children

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related