Angular自定义Checkbox点击图标触发两次点击事件的问题问询

问题场景 #

自定义Angular Checkbox组件，点击label元素或标签span时功能正常，但直接点击.ico图标时，toggleCheck方法会触发两次：

• 第一次事件目标是.ico元素
• 第二次事件目标是隐藏的<input type="checkbox">元素
  两次触发导致组件值被连续反转，视觉上无变化。若在toggleCheck中添加event.stopPropagation()或event.preventDefault()，组件绑定的(change)事件会完全失效，无法触发外部数据变更逻辑。

原因解析 #

1. 事件冒泡触发第一次执行：点击.ico图标时，事件会向上冒泡到父级的.ultim-checkbox div，触发绑定的click事件，执行toggleCheck。
2. 浏览器默认行为触发第二次执行：当grouped为true时，label包裹着input元素，浏览器原生逻辑会将label内部的点击关联到input，自动触发input的点击事件；即便grouped为false，浏览器对可点击区域关联input的默认处理依然存在。这个input的点击事件会再次冒泡到.ultim-checkbox div，导致toggleCheck被第二次调用。
3. 阻止事件导致change失效：stopPropagation()或preventDefault()会打断原生input的状态变更流程，或者阻止Angular内部的事件传播机制，使得input的change事件无法正常触发，进而导致组件对外暴露的(change)事件失效。

解决方案 #

方案1：过滤重复事件，手动触发change #

在toggleCheck中判断事件来源，跳过input触发的重复调用，并手动对外发射change事件：

import { Component, Output, EventEmitter } from '@angular/core';

// 组件类中添加输出属性
@Output() change = new EventEmitter<any>();

public toggleCheck(event: MouseEvent): any {
    // 跳过input元素触发的点击事件，避免重复执行
    const target = event.target as HTMLElement;
    if (target.tagName === 'INPUT') {
        return;
    }

    if (this.checkboxGroup) {
        this.checkboxGroup.addOrRemove(this.value);
    } else {
        this.value = !this.value;
    }

    this.intermediate = false;
    // 手动触发change事件，确保外部能接收到
    this.change.emit(this.value);
}

方案2：依托原生input事件，避免重复绑定 #

修改组件逻辑，依赖原生input的change事件处理状态，图标仅作为触发input点击的入口：

1. 修改模板中的input和图标部分：

<ng-template #inputTmp>
    <div class="ultim-checkbox"
        [class.readonly]="readonly || disabled"
        [class.checked]="checked"
        [class.intermediate]="intermediate">
        <input type="checkbox"
            tabindex="0"
            [required]="required"
            [(ngModel)]="value"
            [disabled]="disabled"
            [attr.intermediate]="intermediate || null"
            #fieldInput="ngModel"
            #cb
            (change)="onInputChange($event)">
        <span (click)="cb.click()">
            <i class="ico"
                [ngClass]="{
                    'i-check-fat': !intermediate,
                    'i-minus-fat': intermediate
                }"></i>
        </span>
    </div>
</ng-template>

2. 组件中添加onInputChange方法：

import { Component, Output, EventEmitter } from '@angular/core';

@Output() change = new EventEmitter<any>();

public onInputChange(event: Event): void {
    if (this.checkboxGroup) {
        this.checkboxGroup.addOrRemove(this.value);
    }
    this.intermediate = false;
    // 转发原生change事件
    this.change.emit(this.value);
}

这种方式完全遵循原生表单控件的行为逻辑，不会出现重复触发问题，同时能保证(change)事件正常工作。

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