Angular中父元素MouseEvent致子组件toggleChange未触发的原因与解决

这个问题的核心在于Angular变更检测与浏览器事件触发顺序的冲突，具体过程拆解如下：

1. 当你点击复选框时，浏览器的事件触发顺序是：mousedown（父级<div class="item">）→ mousedown（复选框的<input>）→ mouseup → click（复选框的<input>）。
2. 父元素的mousedown事件处理函数中，你设置了this.selected = index，这个赋值会立即触发Angular的变更检测。
3. 变更检测会重新计算cv-checkbox的[toggle]输入属性（也就是调用getSelection(item._itemId)），如果getSelection的返回值依赖于selected变量，那么复选框的toggle状态会瞬间更新。
4. Angular会基于新的toggle值重新渲染cv-checkbox组件，这会直接替换掉原来的<input type="checkbox">元素。
5. 当后续的mouseup和click事件触发时，原来被点击的那个<input>已经被移除了，新生成的元素并没有接收到这次点击事件，所以toggleChange自然不会被触发。

这里提供几种可行的修复方式，你可以根据业务需求选择：

方案1：延迟触发影响变更检测的赋值 #

把this.selected = index的赋值延迟到当前事件循环结束后，让复选框的click事件先完成触发：

onMouseDown(event: MouseEvent, index: number, item: Item) {
  this._mouseDown = true;
  this._initialMousePosition.x = event.clientX;
  this._initialMousePosition.y = event.clientY;
  this.placeholderItem = item;
  // 用setTimeout延迟到下一个事件循环，确保checkbox的click先执行
  setTimeout(() => {
    this.selected = index;
  }, 0);
}

方案2：判断点击目标，跳过复选框的mousedown处理逻辑 #

在mousedown事件中检查点击的目标是不是复选框元素，如果是就不执行会触发变更检测的代码：

onMouseDown(event: MouseEvent, index: number, item: Item) {
  // 检查点击目标是否属于复选框组件
  const target = event.target as HTMLElement;
  const isCheckboxClick = target.closest('input[type="checkbox"]') !== null;
  
  if (!isCheckboxClick) {
    this._mouseDown = true;
    this._initialMousePosition.x = event.clientX;
    this._initialMousePosition.y = event.clientY;
    this.placeholderItem = item;
    this.selected = index;
  }
}

方案3：将selected的赋值移到click事件中 #

如果业务允许，把设置selected的逻辑从mousedown移到父元素的click事件中，避免在mousedown阶段触发变更检测干扰复选框的事件：

<!-- 父元素添加click事件绑定 -->
<div class="item" *ngFor="let item of sortedItems; let i = index" 
     (mousedown)="onMouseDown($event, i, item)"
     (click)="onItemClick(i)">
  <cv-checkbox [toggle]="getSelection(item._itemId)" (toggleChange)="setSelection(item._itemId)"></cv-checkbox>
</div>

onItemClick(index: number) {
  this.selected = index;
}

onMouseDown(event: MouseEvent, index: number, item: Item) {
  this._mouseDown = true;
  this._initialMousePosition.x = event.clientX;
  this._initialMousePosition.y = event.clientY;
  this.placeholderItem = item;
  // 移除this.selected = index;
}

内容的提问来源于stack exchange，提问作者Martijn van den Bergh