嵌套元素中的 onClick 事件

Question

当我单击包含 AnimatedMouse 组件的 div 时，在控制台中记录的事件是 AnimatedMouse 组件的元素之一，而不是 className“animated-mouse”本身的 div。

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>

Answer 1

target始终是被单击的最里面的目标元素。（这在 DOM 中是正确的，而不仅仅是 React。）如果您想要已放置事件处理程序的元素，请使用currentTarget：

\n\n

console.log("clicked element", event.currentTarget )\n// \xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92^\n

\n\n

实例：

\n\n

\r\n

\r\n

console.log("clicked element", event.currentTarget )\n// \xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92\xe2\x88\x92^\n

\r\n

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

\r\n

\r\n

\r\n

\n