Angular中替换click事件以通过ESLint并阻止事件冒泡的合适事件是什么？

这个ESLint错误是出于可访问性规范要求——纯click事件仅支持鼠标触发，键盘用户（依赖Tab导航、回车/空格操作的用户）无法触发该元素的功能，因此规则强制要求click必须搭配键盘事件。

不需要替换click事件，最合理的处理方式是保留click，同时补充对应键盘事件，既能通过ESLint检测，又完全保留阻止事件冒泡的功能：

修改后的HTML代码 #

<div 
  (click)="addBtn($event)" 
  (keydown.enter)="addBtn($event)" 
  (keydown.space)="addBtn($event)"
  tabindex="0"
>Button</div>

TS代码保持不变 #

addBtn(e: Event) {
  e.stopPropagation();
}

关键补充说明 #

• 添加tabindex="0"让该<div>可以被键盘聚焦，确保键盘用户能选中它
• keydown.enter和keydown.space是键盘用户触发按钮类操作的标准方式，符合WCAG可访问性准则
• 原有的e.stopPropagation()对click、keydown事件均生效，不会影响阻止事件冒泡的核心功能

如果执意要替换click事件，可使用pointerup（同时支持鼠标和触摸操作），但仍需搭配键盘事件才能通过ESLint检测，因此优先推荐上述方案。

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