我在一个 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;
}