如何讓我的“點擊”事件處理程序引用這些特定元素？

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>
    </>
  );
}