Can not prevent a child onClick event from the parent's onMouseUp event

I do click down, mouse move, and click up (all this events apply within element area). Events onMouseDown, onMouseMove, onMouseUp defined on the parent element SwipePanel. So I try prevent onClick event on Element component such way:

class SwipePanel extends React.Component {
  handleMouseUp(event) {
    if(event.nativeEvent) {
      event.nativeEvent.preventDefault();
      event.nativeEvent.stopPropagation();
    }
    event.preventDefault();
    event.stopPropagation();
    console.log('SwipePanel onMouseUp');
  }
  ...
}
class Element extends React.Component {
  handleMouseClick(event) {
    console.log('Element onClick');
  }
  ...
}

Via console.log I see

SwipePanel onMouseUp
Element onClick

So I need prevent childs’s onClick event from parent component via onMouseUp. I am using React v0.14.3

[heineiuo]

@nodkz You can use onClickCapture in parent component and stopPropagation if event target is not child component.

https://facebook.github.io/react/docs/events.html#supported-events

[dawsbot]

Another method that I’ve found to be quite straightforward for child onClick ignoring. Give the parent a unique ID. Perhaps "swipe-panel" in your example. Then In the parent’s onClick:

handleMouseClick = event => {
  const target = event.target;
  if (target.id !== 'swipe-panel') {
    return ; // child was clicked, ignore onClick
  }
  
  // rest of click logic here

}