Question

我在div中输入了文本。单击输入应将其设置为焦点并停止div click事件的冒泡。我已经在文本输入事件上尝试过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;
}

Answer 1

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

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

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

例如

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

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

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

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

Answer 2

您有两个不同的事件，一个是click，另一个是<input #inputBox matInput (click)="fireEvent($event)" max-width="12" />。

仅当两个事件属于同一类时，e.stopPropagation（）才起作用。

您可以像这样将输入更改为按预期工作：

{{1}}

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

Answer 3

尝试使用（click）=“ $ event.stopPropagation（）”。这可能会有所帮助，因为它适合我的情况。

Typescript 3 Angular 7 StopPropagation和PreventDefault不起作用

3 个答案: