web-dev-qa-db-fra.com

Typescript 3 Angular 7 StopPropagation et PreventDefault ne fonctionnent pas

J'ai une entrée de texte dans un div. En cliquant sur l'entrée, vous devez la mettre au point et arrêter le bouillonnement de l'événement div click. J'ai essayé les stopPropagation et preventDefault sur l'événement de saisie de texte mais en vain. Les journaux de la console montrent que le clic div s'exécute toujours malgré tout. Comment arrêter l'événement div click de s'exécuter?

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

Vous avez deux événements différents, l'un est mousedown et l'autre est click.

E.stopPropagation () ne fonctionne que si les deux événements sont du même type.

Vous pouvez modifier l'entrée comme celle-ci pour qu'elle fonctionne comme prévu:

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

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

10
Daniel Piñeiro

Vous ne pouvez arrêter la propagation que pour le même événement.

Votre fonction fireEvent arrête la propagation de votre événement mousedown, mais pas de votre événement click.

Si vous voulez arrêter la propagation pour cliquer, essayez d'ajouter un autre événement de clic sur l'entrée et arrêtez la propagation à partir de là

Par exemple

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

Votre autre fonction n'a besoin que de savoir ce qui est nécessaire, c'est-à-dire de définir le focus

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

preventDefault() empêche le comportement par défaut, il n'est pas lié au bouillonnement ou non aux événements, vous pouvez donc l'ignorer en toute sécurité

7
Gonzalo.-