如何让我的“点击”事件处理程序引用这些特定元素？

Question

这是我遇到的一个问题的沙箱。 我正在使用反应：

    <div className="1" onClick={onClickHandler}>
     <div className="2">
      <img className="3">
     </div>
    </div>

在场景 A 中， img不存在onClickHandler的e.target引用了元素2 。 我相信这是因为：

1. “1”和“2”相互重叠 - 当您点击一个时，您就点击了另一个。
2. 与e.currentTarget一样， e.target将引用您点击的具有“点击”处理程序的“最高”元素——有一个例外：如果该元素有一个在您点击时也被点击的后代，它将引用最低的后代。

问题：在场景 B 中，添加了img并且现在e.target指的是img 。 我需要参考元素1和2 ，并打算在事件处理程序保持在“1”的情况下执行此操作。

解决方案：

1. 不知何故，在onClickHandler中让它看到“2”。

2. 将img重构为“2”。 在我的项目中，我认为所有这一切都涉及使img具有“2”具有的所有 html 属性。 但是，我知道“2”上的属性有效——尽管我想不出为什么这个解决方案会失败，但我很犹豫——尤其是如果解决方案#1 有效。

---

Answer 1

总结问题和解决方案

您可以在下面看到两个注销 event.target 的 onClickHandler。

预期：检索叶节点的父节点（没有子节点的子节点或最里面的 HTML 元素）。

实际：检索叶节点。

修复：将event.target更改为event.target.parentNode 。

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  function onClickHandler(event) {
    console.log(event.target); // THE FIX: change this to event.target.parentNode
  }
  return (
    <>
      <div className="one" onClick={onClickHandler}>
        <div className="two"></div>
      </div>

      <div className="one" onClick={onClickHandler}>
        <div className="two">
          <img className="three" />
        </div>
      </div>
    </>
  );
}