javascript - 如何检查单击的元素是否与 React 中的 onClick 事件相同？

Question

假设我有以下代码:

const checkParent = e => {
  console.log(e.target);
}

<Parent onClick={e => checkParent(e)}>
  <ChildOne>
  <ChildTwo>
</Parent>

如何检查是否单击了 e.target是<Parent>元素，不是它的子元素之一？

Answer 1

您可以将 e.target 与 e.currentTarget 进行比较。后者是处理程序实际附加到的元素。 (这在 React 中不是字面意思，因为 React 使用委托(delegate)处理程序，但 React 的合成事件让它看起来如此。)

因此，如果 e.target === e.currentTarget，它就是处理程序“打开”的元素。

实例:

function ChildOne() {
    return <div>Child One</div>;
}
function ChildTwo() {
    return <div>Child Two</div>;
}
function Parent({children, onClick}) {
    return (
        <div onClick={onClick}>
            Parent text
            {children}
            More parent text
        </div>
    );
}
function checkParent(e) {
    console.log(e.target === e.currentTarget ? "Yes" : "No");
}

ReactDOM.render(
    <Parent onClick={e => checkParent(e)}>
        <ChildOne />
        <ChildTwo />
    </Parent>,
    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>