嵌套元素中的 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 ：

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

现场示例：

 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>