How to detect if child is clicked on parent click React

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.

you don't need e.stopPropagation for your use-case. See my updated answer. — Lakshya Thakur
– Lakshya Thakur, Commented Apr 13, 2021 at 10:06
yes, there are again many ways to achieve the requirement but he has two onclick functions in his code, that's why e.stopPropagation is required. — CodeBug
– CodeBug, Commented Apr 14, 2021 at 3:52

CodeBug · Accepted Answer · 2021-04-14 03:53:42Z

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

Rajesh Kumaran · Accepted Answer · 2021-04-13 09:36:35Z

1

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

answered Apr 13, 2021 at 9:36

Rajesh Kumaran

2011 silver badge8 bronze badges

Comments

Lakshya Thakur · Accepted Answer · 2021-04-13 10:04:42Z

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

Mark Baijens · Accepted Answer · 2021-04-13 09:42:26Z

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>

MacGregor · Accepted Answer · 2022-06-08 08:38:06Z

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

Collectives™ on Stack Overflow

How to detect if child is clicked on parent click React

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related