CODEWITHSUNDEEP
javascriptreactjs
Boky
Boky

Reputation: 12084

How to detect if child is clicked on parent click React

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.

Upvotes: 1

Views: 3318

Answers (5)

MacGregor
MacGregor

Reputation: 131

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();

Upvotes: 0

CodeBug
CodeBug

Reputation: 1667

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

Upvotes: 2

Lakshya Thakur
Lakshya Thakur

Reputation: 8316

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"))

Upvotes: 1

Mark Baijens
Mark Baijens

Reputation: 13222

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>

Upvotes: 0

Rajesh Kumaran
Rajesh Kumaran

Reputation: 201

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

Upvotes: 1

Related Questions