1
votes

Comment éviter les bulles d'événement dans Angular 8?

Veuillez comprendre, je suis nouveau dans Angular et je suis en développement global, donc cela pourrait être un problème très inexpérimenté.

Le problème est que j'appelle une fonction à partir du fichier de modèle HTML d'un composant avec $ event comme argument et cela finit par capturer un élément différent de celui que je souhaitais cibler. Cet élément exact sur lequel j'appelle l'événement a deux enfants ...

HTML:

(click)="answeredQuestion(0, $event); $event.stopPropagation()"

Je vise à récupérer le conteneur div avec "cursorPointer" chaque fois que j'appelle cet événement. Je suppose que c'est un problème d'événement bouillonnant car si je cliquais sur le conteneur div avec l'id de "chickenTenders" , ce même conteneur sera renvoyé par le $ event argument dans la fonction replyQuestion () sur mon fichier ts ...

J'ai déjà effectué une recherche en ligne ( Arrêter la propagation des événements de la souris ) mais dans cet exemple, l'étudiant pose une question qui provenait d'une directive, donc je ne savais pas quelle solution pourrait être ... p>

J'ai déjà essayé:

(click)="answeredQuestion(0, $event);false"

Et:

          <div class="cursorPointer" (click)="answeredQuestion($event)">
                <div id="chickenTenders" class="backImageCov question_0Img"></div>
                <h3 class="questionSubTitle">Chicken Tenders</h3>
           </div>

Cependant, aucun ne semble aider la cause . En termes simples, j'espère que la solution me donnerait un moyen simple d'accéder à cet élément parent (

 ) à chaque fois, même si les éléments enfants sont ceux-là cliqué.   Merci pour votre temps les gars, je l'apprécie.

javascript angular html event-propagation

2 commentaires

Pourquoi avez-vous d'abord un appel de replyQuestion avec un argument, puis avec deux?

Eh bien, cela a à peine à voir avec tout le sujet de la question. Cependant, c'était une erreur d'édition dans le débordement de pile. J'ai dû éditer beaucoup plus mon code pour le simplifier et rendre la question principale beaucoup plus compréhensible. Là où des bits de code inutiles. Pensez-y comme s'il n'avait qu'un seul paramètre à l'origine ... ($ event reference.) Merci pour votre commentaire BTW

3 Réponses :

2
votes

Et si vous désactiviez les événements de pointeur pour les éléments enfants avec CSS?

.cursorPointer > * {
    pointer-events:none;
}

Ou mieux:

.cursorPointer > div, .cursorPointer > h3{
    pointer-events: none;
}

0 commentaires

1
votes

Vous pouvez utiliser une variable de référence de modèle pour saisir une référence à l'élément souhaité.

<div #clickElement class="cursorPointer" (click)="answeredQuestion(clickElement)">

0 commentaires

1
votes

Vous pouvez gérer la propagation des événements (bouillonnement) de manière angulaire.

Utilisez ceci dans votre composant enfant.

onClick(event: Event) {
    event.stopPropagation();
    // do your stuff
  }

0 commentaires