The right way is to use .stopPropagation
,
var Component = React.createClass({
handleParentClick: function() {
console.log('handleParentClick');
},
handleChildClick: function(e) {
e.stopPropagation();
console.log('handleChildClick');
},
render: function() {
return <div onClick={this.handleParentClick}>
<p onClick={this.handleChildClick}>Child</p>
</div>;
}
});
Your event handlers will be passed instances of SyntheticEvent, a
cross-browser wrapper around the browser’s native event. It has the
same interface as the browser’s native event, including
stopPropagation() and preventDefault(), except the events work
identically across all browsers.
Event System