Typescript 3 Angular 7 StopPropagation 和 PreventDefault 不起作用

Question

我在 div 中有一个文本输入。单击输入应将其设置为焦点并停止 div 单击事件的冒泡。我在文本输入事件上尝试了 stopPropagation 和 preventDefault 但无济于事。控制台日志显示无论如何，div click 仍然执行。如何停止执行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 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您只能停止同一事件的传播。

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

如果你想停止传播点击，尝试在输入上添加另一个点击事件并从那里停止传播

例如

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

您的其他功能只需要知道需要什么，即设置焦点

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

preventDefault() 防止默认行为，它与冒泡或事件无关，所以你可以安全地忽略它

原文由 Gonzalo.- 发布，翻译遵循 CC BY-SA 4.0 许可协议