Javascript 防止事件在dom树中冒泡

我有一个卡片组件，如下所示

<div
      onClick={e => {
        console.log("DEMAND CARD CLICKED");
        if (isSelectionActive) {
          setSelected();
        }
      }}
>  
      <DemandCardFooter
        demandId={id}
        totalBooked={totalBooked}
        totalDemand={totalDemand}
      />    
</div>

{
console.log（“点击需求卡”）；
如果（isSelectionActive）{
设置已选（）；
}
}}
>  

这就是

看起来的样子：

<div className="vt-card-footer d-flex justify-content-between align-items-baseline px-3">
      <DemandSelector demandId={demandId} />
      <p className="lead font-weight-bold mb-0">
        <span className="text-success">{totalBooked}</span> / {totalDemand}{" "}
        <small className="text-muted font-weight-normal">Units.</small>
      </p>
</div>

const DemandSelector = ({ demandId }) => {
  const [isChecked, setChecked] = useRowSelector({
    path: "demands",
    payload: { id: demandId }
  });
  return (
    <Checkbox
      checked={isChecked ? true : false}
      onClick={e => {
        console.log("CHECKBOX CLICKED");
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        setChecked();
      }}
    />
  );
};

{totalBooked}/{totalDemand}{”“}
单位。

最后是

的样子：

<div className="vt-card-footer d-flex justify-content-between align-items-baseline px-3">
      <DemandSelector demandId={demandId} />
      <p className="lead font-weight-bold mb-0">
        <span className="text-success">{totalBooked}</span> / {totalDemand}{" "}
        <small className="text-muted font-weight-normal">Units.</small>
      </p>
</div>

const DemandSelector = ({ demandId }) => {
  const [isChecked, setChecked] = useRowSelector({
    path: "demands",
    payload: { id: demandId }
  });
  return (
    <Checkbox
      checked={isChecked ? true : false}
      onClick={e => {
        console.log("CHECKBOX CLICKED");
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        setChecked();
      }}
    />
  );
};

const-DemandSelector=（{demandId}）=>{
const[isChecked，setChecked]=useRowSelector({
路径：“需求”，
有效负载：{id:demandId}
});
返回(
{
log（“单击复选框”）；
e、 停止传播（）；
e、 nativeEvent.stopImmediatePropagation（）；
setChecked（）；
}}
/>
);
};

我的问题是，当我单击复选框时，复选框的

onClick

和卡的

onClick

都会被触发，有没有办法将回调限制到最低级别

---

问题不在于事件冒泡，而在于事件捕获阶段

使用

e.stopPropagation（）停止事件冒泡您正在代码中使用的。但在父事件中不阻止事件捕获

您可以通过添加
e.stopPropagation（）来防止它

<div
      onClick={e => {
         e.stopPropagation();
        console.log("DEMAND CARD CLICKED");
        if (isSelectionActive) {
          setSelected();
        }
      }}
    >
      <DemandCardFooter
        demandId={id}
        totalBooked={totalBooked}
        totalDemand={totalDemand}
      />
    </div>

{
e、 停止传播（）；
console.log（“点击需求卡”）；
如果（isSelectionActive）{
设置已选（）；
}
}}
>
过了一会儿就明白了。解决方案是将
stopPropogation（）
放在DOM元素中，封装

所以这个代码起作用了

 <div
      className="vt-card-footer d-flex justify-content-between align-items-baseline px-3"
      onClick={e => {
        e.stopPropagation();
      }}
    >
      <DemandSelector demandId={demandId} />
      <p className="lead font-weight-bold mb-0">
        <span className="text-success">{totalBooked}</span> / {totalDemand}{" "}
        <small className="text-muted font-weight-normal">Units.</small>
      </p>
    </div>

{
e、 停止传播（）；
}}
>

{totalBooked}/{totalDemand}{”“}
单位。


也别忘了把它放下来

const DemandSelector = ({ demandId }) => {
  const [isChecked, setChecked] = useRowSelector({
    path: "demands",
    payload: { id: demandId }
  });

  return (
    <Checkbox
      checked={isChecked ? true : false}
      onClick={e => {
        e.stopPropagation();
        setChecked();
      }}
    />
  );
};

const-DemandSelector=（{demandId}）=>{
const[isChecked，setChecked]=useRowSelector({
路径：“需求”，
有效负载：{id:demandId}
});
返回(
{
e、 停止传播（）；
setChecked（）；
}}
/>
);
};
e.stopPropagation（）有什么问题我可以看到您在代码中使用了这个。它应该防止事件传播。尝试此操作后，它不起作用，我收到的问题与您使用的react版本相同？这可能是一个bug。我正在使用React v16.12.0