角度模糊事件阻止按钮的点击事件

Question

我有一个包含输入的嵌套子组件。输入端有一个

blur

事件

<input (blur)="onBlur()" ...>

在祖先组件中，我有另一个带有单击事件的元素

<button (click)="onClick() ...>

由于

blur

事件，

click

事件不会触发。

我可以通过将

click

事件更改为

mousedown

来解决此问题。这并不理想，因为用户体验略有变化。

我尝试在

event.preventDefault();

方法中添加

onBlur()

方法，但它似乎没有实现任何目标（尽管我在其他 SO 帖子上读到它可以修复它）。

有解决办法吗？

https://stackblitz.com/edit/stackblitz-starters-h8vgrf?file=src%2Fdeeply-nested%2Fdeeply-nested.component.html

Answer 1

按钮工作正常，当您使用

blur

添加新元素时，按钮会向下移动并且不会记录单击。

我看到的另一个问题是点击没有包含在事件绑定中

(click)

，这阻止了点击的发生。

html

<span (click)="clearAll($event)">X - Clear All</span><br /><br />
<app-deeply-nested [inputFormCtrl]="formControl"></app-deeply-nested>

<br />
<br />

ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, UntypedFormBuilder } from '@angular/forms';
import { DeeplyNestedComponent } from '../deeply-nested/deeply-nested.component';

@Component({
  selector: 'app-ancestor',
  templateUrl: './ancestor.component.html',
  styleUrls: ['./ancestor.component.css'],
  standalone: true,
  imports: [DeeplyNestedComponent],
})
export class AncestorComponent implements OnInit {
  formControl: FormGroup;

  constructor(private fb: UntypedFormBuilder) {
    this.formControl = this.fb.group({
      tags: this.fb.array([]),
    });
  }

  ngOnInit() {}

  clearAll(event: Event) {
    this.formControl.reset();
  }
}

堆栈闪电战