1
votes

Empêcher l'événement de clic de déclencher d'autres éléments de clic sous l'élément avant

Considérez la structure suivante

<div (click)="setThing(null)">

   <table>
       <tr *ngFor="let item of items"  (click)="setThing(item)">
            <td>{{item.whatever}}</td>
            <td>{{item.whocares}}</td>
       </tr>
   </table>


  <div id="slidein" *ngIf="activeThing">
       {{ activeThing.whatver }}
  </div>
</div>

L'idée ici est que les utilisateurs devraient pouvoir cliquer sur une ligne de tableau pour définir un activeThing via un appel de fonction. Tandis qu'un activeThing évalue à vrai, il montre cette diapositive en survol de la droite (pensez comme une diapositive de menu hamburger)

Le problème ici est que l'événement de clic sur le row se déclenche définitivement, mais ensuite l'événement de clic semble s'infiltrer et cliquer également sur l'arrière-plan, ce qui définit activeThing sur null.

Comment puis-je empêcher le clic?

ou plutôt, quelle est la meilleure approche pour ce scénario. Dans cette situation, l'utilisateur est censé toujours pouvoir interagir avec d'autres choses tant que cette fenêtre contextuelle est visible, je ne peux donc pas simplement avoir un survol cliquable en arrière-plan 100% x100% fané. Bien que cette chose se comporte de cette façon, je ne suis même pas convaincu que cela aiderait

angular angular7

0 commentaires

3 Réponses :

1
votes

Le moyen le plus propre et le plus réutilisable est de créer une directive qui arrête la propagation de l'événement click:

<div (click)="setThing(null)">

   <table>
       <tr *ngFor="let item of items" stop-propagation (click)="setThing(item)">
            <td>{{item.whatever}}</td>
            <td>{{item.whocares}}</td>
       </tr>
   </table>


  <div id="slidein" *ngIf="activeThing">
       {{ activeThing.whatver }}
  </div>
</div>

Et puis attachez cette directive à votre activeThing:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[stop-propagation]'
})
export class StopPropagationDirective {

  constructor() { }

  @HostListener('click', ['$event']) onClick($event: Event) {
    $event.stopPropagation();
    return false;
  }

}

0 commentaires

3
votes

Vous pouvez empêcher l'événement de clic d'atteindre les éléments sous-jacents en appelant Event.stopPropagation :

(click)="setThing(item); $event.stopPropagation()"

0 commentaires

4
votes

En fonction de votre scénario actuel, il est approprié d'appeler $ event.stopPropagation (); à l'intérieur de l'événement de clic. Ce qu'il fait est.

La méthode stopPropagation () de l'interface Event empêche propagation de l'événement en cours dans les phases de capture et de bouillonnement.

Ainsi, le clic de l'élément parent ne sera pas déclenché. Voici un exemple de travail.

Démo Stack Blitz < / p>

0 commentaires