如何检测孩子是否点击了父母点击反应

Question

I'm using React and I have the following situation.

I have one parent div with onClick event, which takes full width and inside that div I have an image. I want to be able to know where it is clicked. Thus, I want to know if image (child) or div(parent) is clicked.

My code is as follows:

class APP extends React.Component {
  constructor(props) {
    super(props)   
  }
  
  render() {
    return (
      <div className="parent" onClick={(e) => console.log("PARENT CLICK")}>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
          style={{maxWidth: "60%", maxHeight: "90%", pointerEvents: 'none', zIndex: 99999}}
          onClick={e => console.log("IMAGE CLICK")}
          />
      </div>
    )
  }
}

ReactDOM.render(<APP />, document.querySelector("#app"))

But it detects always the parent click. I tried to add z-index to the child, but I think that child can't be in front of parent.

Here is the fiddle.

Answer 1

class APP extends React.Component {
 constructor(props) {
 super(props)   
}

handleclick(e){
 e.stopPropagation();
 console.log(e.target.tagName);
 return false;
}   
render() {
  return (
    <div className="parent" onClick={(e) => this.handleclick(e)}>
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
      style={{maxWidth: "30%", maxHeight: "30%", zIndex: 99999}}
      onClick={(e) => this.handleclick(e)}
      />
  </div>
 )
}
} 

ReactDOM.render(<APP />, document.querySelector("#app"))

please note here I added e.stopPropagation() in the click event which only executes with the target element.. here you can read more about propogation

and also please remove the CSS pointerEvents: 'none' from the img tag, it works fine.

Working Fiddle

Answer 2

You have pointerEvents set to none in your img 's inline style object. Remove that. Can remove zIndex as well.

From CSS-Tricks :-

pointer-events:none prevents all click, state and cursor options on the specified HTML element

You don't need e.stopPropagation() here. Just set the event handler only on parent like so (this is known as event delegation ):-

class APP extends React.Component {
  constructor(props) {
    super(props)   
  }
  
  handleclick(e){
    console.log(e.target.tagName);
  }  
  render() {
    return (
      <div className="parent" onClick={this.handleclick}>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
          style={{maxWidth: "30%", maxHeight: "30%"}}
          />
      </div>
    )
  }
}

ReactDOM.render(<APP />, document.querySelector("#app"))

Answer 3

pointerEvents: none will block the pointer events.Remove that from your styling

Answer 4

Im not sure if this is the react way of doing this but in javascript you can use the event object properties to get the element that triggered it with event.target and the element that handled it with event.currentTarget .

 document.querySelector('#parent').addEventListener('click', (e) => { console.log(`clicked element is: ${e.target.id}`); console.log(`event handler element is: ${e.currentTarget.id}`); });

 <div id='parent'>parent <div id='child'>child</div> </div>

Answer 5

As CodeBug noted above it should be enough to stop the propagation on the click event by calling (inside of the onClick function):

event.stopPropagation();