React - Prevent Event Trigger on Parent From Child
I had the same issue in React and solved it using the solution bellow:
if(e.currentTarget != e.target ) return;
.......
You can use stopPropagation
stopPropagation
- Prevents further propagation of the current event in the bubbling phase
var App = React.createClass({
handleParentClick: function (e) {
console.log('parent');
},
handleChildClick: function (e) {
e.stopPropagation();
console.log('child');
},
render: function() {
return <div>
<p onClick={this.handleParentClick}>
<span onClick={this.handleChildClick}>Click</span>
</p>
</div>;
}
});
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
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">×</span>
</button>
<span className="label-text fs-12">
{ displayLabel }
</span>
</span>
);
}
}
export default LabelCancelable;
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.