React中点击子组件时如何屏蔽父组件的点击效果？

方法一：在子组件中调用stopPropagation()阻止事件冒泡 #

核心思路是切断事件向上冒泡的路径，让子组件的交互事件无法传递到父级Card组件。直接在子组件的事件处理函数中调用事件对象的stopPropagation()方法即可。

示例代码：

function Card() {
  const handleCardClick = () => {
    console.log("卡片被点击");
    // 这里处理卡片点击的逻辑，比如激活状态切换
  };

  const handleSliderChange = (e) => {
    e.stopPropagation(); // 阻止事件冒泡到父组件
    console.log("滑块值变化:", e.target.value);
    // 滑块的业务逻辑
  };

  const handleButtonClick = (e) => {
    e.stopPropagation(); // 阻止事件冒泡到父组件
    console.log("按钮被点击");
    // 按钮的业务逻辑
  };

  return (
    <div className="card" onClick={handleCardClick}>
      <h3>卡片标题</h3>
      {/* 滑块需要同时处理onChange和onClick的冒泡阻止 */}
      <input
        type="range"
        onChange={handleSliderChange}
        onClick={(e) => e.stopPropagation()}
      />
      <button onClick={handleButtonClick}>操作按钮</button>
    </div>
  );
}

注意：像滑块这类组件，点击轨道也会触发onClick事件，所以需要额外为其添加onClick事件来阻止冒泡，确保所有子组件交互都不会触发父组件逻辑。

方法二：在父组件点击事件中判断目标元素 #

如果不想逐个修改子组件，可以在父组件的点击处理函数中，通过事件对象判断点击的是否是子组件元素，只有点击卡片本身区域时才执行逻辑。

示例代码：

function Card() {
  const handleCardClick = (e) => {
    const cardDom = e.currentTarget;
    // 若点击的是子组件元素，直接返回不执行卡片逻辑
    if (cardDom !== e.target && cardDom.contains(e.target)) {
      return;
    }
    console.log("卡片被点击");
    // 处理卡片激活状态等逻辑
  };

  return (
    <div className="card" onClick={handleCardClick}>
      <h3>卡片标题</h3>
      <input type="range" onChange={(e) => console.log("滑块变化:", e.target.value)} />
      <button onClick={() => console.log("按钮被点击")}>操作按钮</button>
    </div>
  );
}

额外处理：避免子组件触发卡片active样式 #

如果卡片的激活效果是通过CSS:active伪类实现的，仅阻止事件冒泡可能不够，因为伪类触发基于DOM事件。可以通过以下两种方式解决：

• 给子组件设置独立的:active样式，覆盖父组件的激活样式；
• 使用CSS的:not和:has选择器，仅当卡片未包含激活状态的子组件时，才触发自身的激活样式：

.card:not(:has(input:active, button:active)):active {
  background-color: #f5f5f5;
  /* 卡片激活样式 */
}

或者通过React状态控制激活样式，仅在点击卡片本身时切换状态，子组件点击不改变该状态。

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