webentwicklung-frage-antwort-db.com.de

Typoskript 3 Angular 7 StopPropagation und PreventDefault funktionieren nicht

Ich habe eine Texteingabe in einem div. Durch Klicken auf die Eingabe sollte diese so eingestellt werden, dass sie fokussiert und das Sprudeln des Div-Click-Ereignisses stoppt. Ich habe versucht, stopPropagation und preventDefault für das Texteingabeereignis, aber ohne Erfolg. Die Konsolenprotokolle zeigen, dass der Div-Klick trotzdem ausgeführt wird. Wie kann ich verhindern, dass das div click-Ereignis ausgeführt wird?

// 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

Sie haben zwei verschiedene Ereignisse, eines ist mousedown und eines ist click.

Die e.stopPropagation () funktioniert nur, wenn beide Ereignisse gleich sind.

Sie können die Eingabe so ändern, dass sie wie erwartet funktioniert:

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

Live-Beispiel: https://stackblitz.com/edit/angular-material-basic-stack-55598740?file=app/input -overview-example.ts

10
Daniel Piñeiro

Sie können die Weitergabe nur für dasselbe Ereignis stoppen.

Ihre fireEvent -Funktion stoppt die Weitergabe für Ihr mousedown -Ereignis, jedoch nicht für Ihr click -Ereignis.

Wenn Sie die Weitergabe zum Klicken stoppen möchten, versuchen Sie, der Eingabe ein weiteres Klickereignis hinzuzufügen und die Weitergabe von dort aus zu stoppen

Zum Beispiel

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

Ihre andere Funktion muss nur wissen, was erforderlich ist, dh den Fokus einstellen

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

preventDefault() verhindert das Standardverhalten, es hängt nicht mit dem Sprudeln oder nicht mit den Ereignissen zusammen, sodass Sie es sicher ignorieren können

7
Gonzalo.-