Typescript 3 Angular 7中StopPropagation和PreventDefault无效

Question

我在一个 div 内部有一个文本输入框。点击输入框应该使其获得焦点并停止冒泡 div 点击事件。我尝试了在文本输入框事件上使用 stopPropagation 和 preventDefault，但都没有起作用。控制台日志仍然显示 div 点击事件执行了。如何停止 div 点击事件的执行？

// html
<div (click)="divClick()" >
  <mat-card mat-ripple>
    <mat-card-header>
      <mat-card-title>
        <div style="width: 100px">
          <input #inputBox matInput (mousedown)="fireEvent($event)" max-width="12" />
        </div>
      </mat-card-title>
    </mat-card-header>
  </mat-card>
</div>


// component
@ViewChild('inputBox') inputBox: ElementRef;
divClick() {
    console.log('click inside div');
}

fireEvent(e) {
    this.inputBox.nativeElement.focus();
    e.stopPropagation();
    e.preventDefault();
    console.log('click inside input');
    return false;
}

- user1019042

Answer 1

你有两个不同的事件，一个是 mousedown 事件，另一个是 click 事件。

只有在这两个事件是相同类型的情况下，e.stopPropagation() 才能起作用。

你可以像这样更改输入以使其按预期工作：

<input #inputBox matInput (click)="fireEvent($event)" max-width="12" />

实时示例： https://stackblitz.com/edit/angular-material-basic-stack-55598740?file=app/input-overview-example.ts

- Daniel Piñeiro

Answer 2

你只能停止相同事件的传播。

你的fireEvent函数会停止mousedown事件的传播，但不会停止click事件的传播。

如果你想要停止传播到click，可以在输入框上添加另一个click事件，并从那里停止传播。

例如：

<input #inputBox matInput (click)="$event.stopPropagation()" max-width="12" />

您的另一个函数只需要知道所需的内容，也就是设置焦点

fireEvent(e) {
    this.inputBox.nativeElement.focus();
    console.log('click inside input');
}

preventDefault() 阻止默认行为，与事件的冒泡或不冒泡无关，因此您可以放心地忽略它。

- Gonzalo.-

Answer 3

尝试使用(click)="$event.stopPropagation()"。在我的情况下，这很有用。

- Himanshu Patni