CODEWITHSUNDEEP
javascriptreactjs
S. Hesam
S. Hesam

Reputation: 6673

onClick event in nested elements

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>

Upvotes: 5

Views: 1086

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074989

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>

Upvotes: 5

Related Questions