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