表格可点击<tr>覆盖菜单按钮，如何实现行可点击且按钮正常响应？

核心思路是阻止菜单按钮的事件冒泡：行的点击事件作为父元素会捕获子元素触发的点击事件，导致按钮功能被行跳转覆盖。只需给菜单按钮添加阻止事件冒泡的逻辑，就能让两者互不干扰。

修改后的代码示例 #

<thead>
  <tr>
    <th>#</th>
    <th>测试数据</th>
    <th>测试数据</th>
    <th>测试数据</th>
    <th>测试数据</th>
    <th>测试数据</th>
    <th>测试数据</th>
    <th>测试数据</th>
    <th>测试数据</th>
    <th></th>
  </tr>
</thead>
       
<tbody>
  {tableValues && tableValues.map((tableValue, index) => (
    <tr key={index} className="hover:cursor-pointer" onClick={() => handleRowClick(tableValue.id)}>
      <td>{index + 1}</td>
      <td>{tableValue.TestData}</td>
      <td>{tableValue.dispatch && dayjs.unix(tableValue.dispatch.seconds).format('DD/MM/YY')}</td>
      <td>{tableValue.TestData}</td>
      <td>{tableValue.TestData}</td>
      <td>{tableValue.TestData}</td>
      <td>{tableValue.TestData}</td>
      <td>{tableValue.TestData}</td>
      <td>{tableValue.TestData}</td>
      <td>
        <Menu shadow="md" width={200}>
          <Menu.Target>
            <UnstyledButton onClick={(e) => e.stopPropagation()}>
              <IconDotsVertical>切换菜单</IconDotsVertical>
            </UnstyledButton>
          </Menu.Target>
        </Menu>
      </td>
    </tr>
  ))}
</tbody>

关键修改说明 #

• 在<UnstyledButton>上新增onClick={(e) => e.stopPropagation()}：点击按钮时阻止事件向上冒泡到父元素<tr>，避免触发行的跳转逻辑。
• 补全了原代码中未闭合的<tr>和<td>标签，保证HTML结构合法。

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