react: onClick - get only the clicked element, not the children

Question

I have a button, inside this button is a fontawesome svg. The listener is on the button only, not on the svg. Though, when I click on the svg, the event.target is not the button.

But I only need the button as target.

Here's the code:

const icon = '<svg aria-hidden="true" data-prefix="fas" data-icon="paragraph" class="svg-inline--fa fa-paragraph fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M408 32H177.531C88.948 32 16.045 103.335 16 191.918 15.956 280.321 87.607 352 176 352v104c0 13.255 10.745 24 24 24h32c13.255 0 24-10.745 24-24V112h32v344c0 13.255 10.745 24 24 24h32c13.255 0 24-10.745 24-24V112h40c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24z"></path></svg>';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick(event) {
    event.stopPropagation();
    console.log(event.target);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          <span dangerouslySetInnerHTML={{__html: icon}} />
        </button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

I wrote a little pen: https://codepen.io/DaFunkyAlex/pen/aRvVjd

Posible duplicate of this question: https://stackoverflow.com/questions/29168719/can-you-target-an-elements-parent-element-using-event-target — Mirosław, Oct 02 '18 at 09:56
Possible duplicate of [Can you target an elements parent element using event.target?](https://stackoverflow.com/questions/29168719/can-you-target-an-elements-parent-element-using-event-target) — Stephen Kennedy, Oct 02 '18 at 10:46
You can check also with ease if `e.target === e.currentTarget` . The `e.target` tells your the actual clicked element where `e.currentTarget` is the parent element with the click listener. — konsalex, Apr 14 '20 at 15:25

score 22 · Accepted Answer · answered Oct 02 '18 at 09:52

22

You should use: event.currentTarget, which is always the object listening for the event.

The event.target is the actual target that received the click.

answered Oct 02 '18 at 09:52

janhartmann

14,713
15
82
138

Facepalm... that's absolutely corrent. Thx – DaFunkyAlex Oct 02 '18 at 10:00

score 2 · Answer 2 · answered Oct 02 '18 at 09:54

It can be done in multiple ways. I prefer the CSS way of doing it, applying pointer-events : none to the children span.

Codepen : https://codepen.io/imsontosh/pen/mzeqNx

button { 
  background: #eee;
  border: 1px solid #ddd; 
  width: 150px;
  span{
    pointer-events:none;
  }
}

react: onClick - get only the clicked element, not the children

2 Answers2