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;
}

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

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() предотвращает поведение по умолчанию, оно не связано с пузырьками или не с событиями, поэтому вы можете смело игнорировать его