Angular中checkbox的change事件调用stopPropagation无法阻止外层div点击触发

问题原因 #

你在change事件中阻止事件冒泡无法生效，是因为点击checkbox时事件触发顺序是click先执行、change后执行：

• 点击动作触发的click事件会先向上冒泡到父div，直接触发clickParent方法
• 后续才触发change事件，此时你再阻止change的冒泡已经无法干涉已经完成冒泡的click事件了

解决方法 #

直接给checkbox和关联的label添加click事件的冒泡阻止即可，修改后的代码如下：

<div
  (click)="clickParent()"
  style="width: 200px; height: 200px; background-color: red"
>
  <input
    type="checkbox"
    id="checkbox-1"
    (change)="clickChild($event)"
    <!-- 新增click事件阻止冒泡 -->
    (click)="$event.stopPropagation()"
  />
  <label 
    for="checkbox-1"
    <!-- 点击label也会触发关联checkbox的动作，同样阻止冒泡 -->
    (click)="$event.stopPropagation()"
  ></label>
</div>

clickParent() {
  console.log('Click parent');
}

clickChild() {
  console.log('Click child');
}

修改后你原来单独定义的stopPropagation方法可以直接删除，无需额外保留。

优化提示：你也可以直接把input嵌套在label内部，只需要给label加一次click冒泡阻止即可，不需要额外写id做关联：

<label (click)="$event.stopPropagation()">
  <input type="checkbox" (change)="clickChild($event)" />
</label>

内容的提问来源于stack exchange，提问作者Timuçin Çiçek