Angular中仅阻止click事件冒泡但允许blur事件的实现方法

在使用(click)="$event.stopPropagation()"阻止事件冒泡时，发现blur事件的触发受到影响，需要找到既能阻止click事件冒泡，又不干扰blur事件执行的实现方式。

相关组件代码：

(click)="$event.stopPropagation()" 

<cell-editor
    (valueChanged)="quantityChanged($event, element)"
    (focusedIn)="focusedIn(element, editableCells.Checked)"
    (resetChanges)="resetChanges()"
    (click)="$event.stopPropagation()"
>
</cell-editor>

可行实现方式 #

1. 明确事件逻辑：stopPropagation不会直接拦截blur事件 #

$event.stopPropagation()仅作用于当前的click事件，阻止其向上冒泡，并不会影响blur事件——因为blur本身是不冒泡事件（Event.bubbles属性为false），两者的事件流完全独立。如果blur没触发，大概率是其他耦合逻辑导致，而非click的阻止冒泡操作直接影响。

2. 改用组件类方法处理click事件（更可控） #

将模板中的click处理逻辑迁移到组件类，明确只针对click事件阻止冒泡，避免模板中直接操作事件对象的隐式问题：

模板修改：

<cell-editor
    (valueChanged)="quantityChanged($event, element)"
    (focusedIn)="focusedIn(element, editableCells.Checked)"
    (resetChanges)="resetChanges()"
    (click)="handleCellEditorClick($event)"
>
</cell-editor>

组件类添加方法：

handleCellEditorClick(event: MouseEvent) {
    // 仅阻止click事件向上冒泡
    event.stopPropagation();
    // 可在此添加其他click相关逻辑，不影响blur事件
}

3. 排查blur事件失效的真实原因 #

如果blur仍无法正常触发，优先检查以下几点：

• 是否有父元素或其他元素的mousedown事件调用了preventDefault()——mousedown会先于blur触发，preventDefault()会阻止元素失焦，进而导致blur不触发
• 确认cell-editor组件内部是否正确派发了blur事件，或是存在内部逻辑阻止blur触发
• 检查元素是否设置了pointer-events: none这类CSS属性，导致焦点交互失效

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