onClick event in nested elements

Question

When I click on the div that includes the AnimatedMouse component the event that logged in the console is one of the elements of AnimatedMouse component not the div with className "animated-mouse" itself.

const AnimatedMouseScroll = () => { return ( <div class="scroll-msg-container"> <div class="scroll-msg-inner"> <div class="scroll-msg-wheel"> click here </div> </div> </div> ); } const EmployerService = () => { const scrollToNextSectionHandler = (event) => { console.log("clicked element", event.target) }; return ( <div className="animated-mouse" onClick={(e) => scrollToNextSectionHandler(e)}> <AnimatedMouseScroll /> </div> ); } ReactDOM.render(<EmployerService />, document.getElementById("root"));

<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

You haven't included AnimatedMouse. You've included AnimatedMouseScroll, but not AnimatedMouse. I've turned your code blocks into a Stack Snippet (the [<>] toolbar button) and changed AnimatedMouse to AnimatedMouseScroll and it seems to show what you're trying to show. For next time, here's how to do one. Runnable examples help you ensure you've included everything necessary, and make it much easier for people to help you. — T.J. Crowder
– T.J. Crowder, Commented Jan 20, 2020 at 7:47
try onClick={(e)=> {e.stopPropagation(); scrollToNextSectionHandler(e);}} — Arshpreet Wadehra
– Arshpreet Wadehra, Commented Jan 20, 2020 at 7:47
@T.J.Crowder I made a mistake in copy and paste the code, but in the real project, everything is ok. — S. Hesam
– S. Hesam, Commented Jan 20, 2020 at 7:52

T.J. Crowder · Accepted Answer · 2020-01-20 07:59:04Z

target is always the innermost target element that was clicked. (This is true in the DOM, not just React.) If you want the element you've put the event handler on, use currentTarget:

console.log("clicked element", event.currentTarget ) // −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^

Live Example:

const AnimatedMouseScroll = () => { return ( <div class="scroll-msg-container"> <div class="scroll-msg-inner" > <div class= "scroll-msg-wheel" > click here </div> </div> </div> ); } const EmployerService = () => { const scrollToNextSectionHandler = (event) => { console.log("clicked element", event.currentTarget ) }; return ( <div className="animated-mouse" onClick={(e) => scrollToNextSectionHandler(e)}> <AnimatedMouseScroll /> </div> ); } ReactDOM.render(<EmployerService/>, document.getElementById("root"));

<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

Collectives™ on Stack Overflow

onClick event in nested elements

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related