'React - Prevent Event Trigger on Parent From Child

I have this scenario, where when parent element is clicked, it flips to show a child element with different colours. Unfortunately, when the user clicks on one of the colours, the 'click' event on parent is also triggered.

How can I stop the event trigger on parent when the child is clicked?

Possible solutions I am wondering:

  1. CSS?
    Append pointer-events : none class to the parent when the child is clicked. However, this would mean that the parent will need to be cleansed of the pointer-events class later.

  2. Using Ref?
    Record the ref of the parent React element & upon click on the child, compare the event.target against the ref? I don't like this because I don't like the global ref.

Thoughts and the better solution would be much appreciated. The question is: How can I stop the event trigger on parent when the child is clicked?

javascriptcssreactjseventsdom-events


Solution 1:[1]

I had the same issue in React and solved it using the solution bellow:

if(e.currentTarget != e.target ) return;
.......

Solution 2:[2]

Another solution is to attach to the event callback on the parent the following:

if(event.target == event.currentTarget){
  event.stopPropagation()
  ....
}

This way you can intercept events, that originated in the attached DOM node and unrelated events are relayed to the next node.

Solution 3:[3]

I wanted to invoke function on props but at the same time wanted to stop event propagation from child to parent, here is how its handled 

class LabelCancelable extends Component {

  handleChildClick(e) {
    e.stopPropagation()
  }
  closeClicked(e, props) {
    e.stopPropagation();
    props.onCloseClicked()
  }

  render() {
    const {displayLabel} = this.props;
    return (
      <span className={ "label-wrapper d-inline-block pr-2 pl-2 mr-2 mb-2" } onClick={ this.handleChildClick }>
          <button type="button" className="close cursor-pointer ml-2 float-right" aria-label="Close"
              onClick={(e) => this.closeClicked(e, this.props) }>
              <span aria-hidden="true">&times;</span>
          </button>
          <span className="label-text fs-12">
            { displayLabel }
          </span>
      </span>
    );
  }
}

export default LabelCancelable;

Solution 4:[4]

I find this solution the cleanest. Thank you @JohnFash!

onClick={(event) => event.currentTarget == event.target && doSomething(event)}

Here is an attempt at explaining this in more details: when your mouse enters the parent element, the currentTarget is set (event), then when it enters the child element, the target changes. If you don't do the check, the parent's onClick triggers because the mouseleave event hasn't triggered.

Solution 5:[5]

I had this problem with Material-UI DataGrid and solved it using this:

event.defaultMuiPrevented = true;

e.g:

<DataGrid
  onCellDoubleClick={(params, event) => {
    if (!event.ctrlKey) {
      event.defaultMuiPrevented = true;
    }
  }}
  {...data}
/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 John Fash
Solution 2
Solution 3 Mayur Nandane
Solution 4 Saif Ehsan
Solution 5 Gifford N.

Related Questions