如何确保点击事件仅捕获React组件中的<tr>父元素？

在React中，事件触发时event.target指向实际被点击的DOM元素，而event.currentTarget始终指向绑定事件处理函数的元素。你遇到的问题可以通过以下方式解决：

推荐方案：使用event.currentTarget获取绑定事件的 #

直接在事件处理函数中用currentTarget替代target，就能确保拿到的是外层的元素，无需修改子元素结构：

import React from "react";
import styles from "./Ticket.module.css";

const Ticket = (props) => {
  const eventToggle = (event) => {
    // currentTarget 始终指向绑定onClick的<tr>元素
    props.onToggleModal(event.currentTarget);
  }

  return (
    <tr className={styles.ticket} onClick={eventToggle}>
      <td className={styles["ticket-col"]}>
        <div>{props.ticket.task}</div>
      </td>
      <td className={styles["ticket-col"]}>
        <div>{props.ticket.assignee}</div>
      </td>
      <td className={styles["ticket-col"]}>
        <div>{props.ticket.time}</div>
      </td>
    </tr>
  );
};

export default Ticket;

备选方案：子元素阻止事件冒泡（不推荐） #

如果必须让event.target固定为，可以在所有子元素的点击事件中阻止冒泡，但这种方式会增加冗余代码，还可能影响其他依赖事件冒泡的功能：

import React from "react";
import styles from "./Ticket.module.css";

const stopPropagation = (e) => {
  e.stopPropagation();
}

const Ticket = (props) => {
  const eventToggle = (event) => {
    props.onToggleModal(event);
  }

  return (
    <tr className={styles.ticket} onClick={eventToggle}>
      <td className={styles["ticket-col"]} onClick={stopPropagation}>
        <div onClick={stopPropagation}>{props.ticket.task}</div>
      </td>
      <td className={styles["ticket-col"]} onClick={stopPropagation}>
        <div onClick={stopPropagation}>{props.ticket.assignee}</div>
      </td>
      <td className={styles["ticket-col"]} onClick={stopPropagation}>
        <div onClick={stopPropagation}>{props.ticket.time}</div>
      </td>
    </tr>
  );
};

export default Ticket;

优先选择第一种方案，currentTarget是React事件系统的标准属性，简洁且无额外副作用。

内容的提问来源于stack exchange，提问作者gtrman97