web-dev-qa-db-ja.com

Typescript 3 Angular 7 StopPropagationおよびPreventDefaultが機能しない

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;
}
javascriptangular7event-bubblingtypescript3.0
18
user1019042

2つの異なるイベントがあります。1つはmousedownで、もう1つは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

10
Daniel Piñeiro

同じイベントの伝播のみを停止できます。

fireEvent関数は、mousedownイベントの伝播を停止しますが、clickイベントの伝播は停止しません。

クリックへの伝播を停止する場合は、入力に別のクリックイベントを追加して、そこから伝播を停止してみてください

例えば

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

あなたの他の機能は、何が必要であるかを知ること、つまりフォーカスを設定することだけが必要です

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

preventDefault()はデフォルトの動作を防止します。これはバブリングやイベントとは関係がないため、安全に無視できます

7
Gonzalo.-