React - Prevent Event Trigger on Parent From Child
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.