能否覆盖组件DOM事件？自定义输入组件change事件触发两次咨询

当然可以覆盖组件上的DOM事件，不过你遇到的两次调用问题是Angular里一个很容易踩的坑——本质是自定义输出事件和原生DOM事件的冲突。我之前排查类似问题时，也花了好一会儿才反应过来是冒泡在搞鬼。

问题根源 #

当你在自定义组件上绑定(change)时，Angular会同时做两件事：

• 触发你通过@Output('change')定义的自定义事件
• 监听宿主元素上冒泡上来的原生change DOM事件（组件内部的子元素比如<input>触发的change会向上冒泡到宿主组件）

这就导致了你的监听函数被调用两次：一次是你自定义输出的预期值，一次是冒泡上来的原生Event对象。

三种解决方案 #

1. 阻止子元素的原生事件冒泡（最直接）

在自定义组件内部的输入元素上，处理change事件并停止冒泡，只让自定义输出事件传递出去：

组件模板：

<input 
  type="text" 
  (change)="handleInputChange($event)"
  [value]="currentValue"
>

组件类：

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

@Component({
  selector: 'custom-input',
  templateUrl: './custom-input.component.html'
})
export class CustomInputComponent {
  @Output('change') changeEvent = new EventEmitter<string>();
  currentValue = '';

  handleInputChange(event: Event) {
    // 阻止原生事件冒泡到宿主元素
    event.stopPropagation();
    // 发射自定义事件，传递预期值
    const inputValue = (event.target as HTMLInputElement).value;
    this.changeEvent.emit(inputValue);
  }
}

2. 改用非原生事件名（更推荐，避免混淆）

不要复用change这种原生DOM事件名，给自定义输出起一个独特的名字，从根源上避免冲突：

组件类：

@Output('inputChange') inputChange = new EventEmitter<string>();

父组件绑定：

<custom-input (inputChange)="onCustomChange($event)"></custom-input>

这种方式更清晰，别人看代码的时候一眼就能区分这是自定义事件而非原生DOM事件，后续维护也不容易踩坑。

3. 通过HostListener拦截宿主元素的原生事件

如果不想修改子元素的事件处理，可以在组件类上用@HostListener监听宿主元素的change事件，直接阻止它的默认行为和冒泡：

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

@Component({
  selector: 'custom-input',
  templateUrl: './custom-input.component.html'
})
export class CustomInputComponent {
  @Output('change') changeEvent = new EventEmitter<string>();

  // 拦截宿主元素的原生change事件
  @HostListener('change', ['$event'])
  onHostChange(event: Event) {
    event.preventDefault();
    event.stopPropagation();
  }

  // 内部触发自定义事件的方法
  triggerChange(value: string) {
    this.changeEvent.emit(value);
  }
}

总结 #

如果一定要复用原生事件名，优先用阻止子元素冒泡的方式；如果可以灵活修改事件名，改用自定义事件名是更优雅的选择，能减少后续维护的混淆。

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