title: React onClick event triggered clicking the child element
body: <p>The event gets triggered when I click on the parent element, which has the onClick attribute in it, but also when I click on its child element which has no onClick attribute.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.scss';
  
  function Child(props){
      return(
          &lt;div className='child'
                   style={
                      {
                          left:`${props.place[0]}px`,
                          top: `${props.place[1]}px`
                      }
                   }/&gt;
      );
  }   
  
  class App extends React.Component{
      constructor(props){
          super(props);
          this.state = {
              locus:[],
          }
  
          this.relocate = this.relocate.bind(this);
      }
  
      componentDidUpdate(){
          console.table(this.state);
      }
  
      relocate(event){
          this.setState({
              locus:[event.nativeEvent.offsetX, event.nativeEvent.offsetY]
          })
      }
  
      render(){
          return(
              &lt;div className="parent"
                       onClick={this.relocate}&gt;
                  &lt;Child place={this.state.locus} /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'))
  
  </code></pre>
  
  <p>When I click on the parent element the child goes to the vector I just clicked, but when I click on the child element the child goes to some point near the upper left corner (because the coordinates being passed are the offset x and y coordinates of the child element, not the parent's coordinates). I wonder if there is a way to avoid the child element to trigger the onClick event.</p>