Angular指令阻止默认点击事件问题：无法阻止事件传播

你的代码存在两个核心问题，导致无法阻止按钮的click事件执行：

1. 输入属性绑定不匹配 #

指令的@Input() setter命名为edjDisabled，但HTML中使用的绑定是[myDisabled]，两者名称不匹配，导致禁用状态_isdisabled无法随reactiveForm.invalid的变化正确更新，最终事件阻止逻辑失效。

2. 事件阻止方式错误 #

e.stopPropagation()仅能阻止事件冒泡到父元素，无法阻止同一元素上后续注册的事件监听器执行。而Angular模板中的(click)="onSubmit()"是在指令的@HostListener('click')之后执行的，所以仅用stopPropagation()无法拦截它。

修正后的完整代码 #

指令代码（TypeScript） #

import { Directive, ElementRef, HostListener, Input, Renderer2 } from "@angular/core";

@Directive({
  selector: '[myDisabled]',
})
export class A11yDisabled {
  private _isdisabled: boolean = false;

  constructor(
    private _elementRef: ElementRef,
    private _renderer: Renderer2
  ) {}

  // 修正Input名称，与HTML绑定的[myDisabled]对应
  @Input() set myDisabled(condition: boolean) {
    this._isdisabled = condition;
    if (condition) {
      this._renderer.addClass(this._elementRef.nativeElement, 'a11y-disabled');
      this._renderer.setAttribute(this._elementRef.nativeElement, 'aria-disabled', 'true');
      // 禁用时移除焦点能力，增强无障碍性
      this._renderer.setAttribute(this._elementRef.nativeElement, 'tabindex', '-1');
    } else {
      this._renderer.removeClass(this._elementRef.nativeElement, 'a11y-disabled');
      this._renderer.removeAttribute(this._elementRef.nativeElement, 'aria-disabled');
      this._renderer.removeAttribute(this._elementRef.nativeElement, 'tabindex');
    }
  }

  @HostListener('click', ['$event'])
  onClick(e: MouseEvent) {
    if (this._isdisabled) {
      // 阻止同一元素后续事件监听器执行 + 阻止默认行为
      e.stopImmediatePropagation();
      e.preventDefault();
    }
  }

  // 补充键盘事件处理，覆盖回车/空格触发按钮的场景（无障碍要求）
  @HostListener('keydown', ['$event'])
  onKeyDown(e: KeyboardEvent) {
    if (this._isdisabled && (e.key === 'Enter' || e.key === ' ')) {
      e.stopImmediatePropagation();
      e.preventDefault();
    }
  }
}

HTML代码（保持不变） #

<button mat-raised-button color="primary" [myDisabled]="reactiveForm.invalid" (click)="onSubmit()">A11y Disabled</button>

关键修改说明 #

• 输入属性对齐：将@Input() setter改为myDisabled，确保与HTML中的绑定名称一致，让禁用状态能正确同步。
• 事件拦截优化：使用e.stopImmediatePropagation()替代stopPropagation()，阻止同一元素上后续的click监听器（即模板中的onSubmit()）执行。
• 无障碍增强：添加键盘事件监听，处理回车键和空格键触发按钮的场景；禁用时设置tabindex="-1"，避免按钮被键盘聚焦，符合无障碍规范。

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