如何在点击 div 时忽略子按钮的事件冒泡-js教程-PHP中文网

如何在点击 div 时忽略子按钮的事件冒泡

本文讲解如何通过阻止事件冒泡，实现在点击容器 div 时触发状态更新，但点击其内部特定子元素（如“submenu”按钮）时不触发父级点击行为，从而避免误操作。

本文讲解如何通过阻止事件冒泡，实现在点击容器 div 时触发状态更新，但点击其内部特定子元素（如“submenu”按钮）时不触发父级点击行为，从而避免误操作。

在 React 中，当一个可交互的子元素（例如 <button></button>）嵌套在具有 onClick 处理函数的父级 <div> 内时，点击该子元素会<strong>默认触发事件冒泡</strong>——即子元素事件执行后，父元素的 <code>onClick 也会被调用。这在实现「仅点击区域主体才激活状态」的 UI 场景中会造成干扰，比如本例中：每个设备卡片点击应高亮（边框变红），但点击右上角「submenu」按钮却意外触发高亮，而它本应只负责打开模态框。

解决方法是：在子按钮的点击事件处理器中调用 e.stopPropagation()，主动中断事件向父级的传播链。

以下是优化后的核心代码示例：

import { useState } from "react";

const data = [
  { id: "1", title: "Samsung" },
  { id: "2", title: "Iphone" },
  { id: "3", title: "LG" },
];

export default function App() {
  const [active, setActive] = useState<string null>(null);

  return (
    <span id="main">
      {data.map((item) => (
        <div key="{item.id}" onclick="{()"> setActive(item.id)}
          className={`device-card ${item.id === active ? "active" : ""}`}
        >
          <p>{item.title}</p>
          <button onclick="{(e)"> {
              e.stopPropagation(); // ✅ 关键：阻止事件冒泡至父 div
              // 此处可添加打开模态框等专属逻辑
              console.log(`Opening submenu for ${item.title}`);
            }}
          >
            submenu
          </button>
        </div>
      ))}
    </span>
  );
}</string>

配套 CSS 示例（确保视觉反馈清晰）：

稿定抠图

一款基于AI自动识别主体并移除图片背景的在线抠图工具，可快速制作透明背景素材和进行后续图片设计。

下载

.device-card {
  border: 2px solid #4caf50; /* 默认绿色边框 */
  padding: 12px;
  margin: 8px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.device-card.active {
  border-color: #f44336; /* 激活时红色边框 */
}

.device-card button {
  float: right;
  background: #2196f3;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
}

⚠️ 注意事项：