4 Réponses :
Comme je l'ai compris, vous pouvez empêcher tout événement déclenché avec css, par exemple ajouter un style d'entrée et d'étiquette - pointer-events: none
<div (click)="onChange($event)" class="option" *ngFor = "let option of answerForm.options">
<input type="checkbox" style="opinter-events: none" name="{{answerForm.type}}{{answerForm.id}}" value="{{option}}">
<label style="opinter-events: none">{{option}}</label>
</div>
Même chose que j'ai dit à Philip, c'est la solution que j'ai choisie mais vous avez une faute d'orthographe des événements de pointeur
Vous devez utiliser <input type="checkbox" name="{{answerForm.type}}{{answerForm.id}}" value="{{option}}" style="pointer-events: none">
C'est ce que j'ai décidé d'utiliser, en entrée et en étiquette. Vous devriez éditer votre réponse pour écrire des événements de pointeur au lieu d'événements d'opinter. Mais merci pour ta réponse
Puisque ce que vous essayez de faire, c'est toujours avoir le parent comme cible de l'événement de clic au lieu des enfants. Vous pouvez utiliser la propriété css pointer-events définie sur none .
De la manière suivante,
<div (click)="onChange($event)" class="option" *ngFor = "let option of answerForm.options"> <input type="checkbox" style="pointer-events: none" name="{{answerForm.type}}{{answerForm.id}}" value="{{option}}"> <label style="pointer-events: none">{{option}}</label>
Pourquoi ça marche?
Comme il est dit dans Mozilla MDN Web Docs, les événements de pointeur définissent dans quelles circonstances (le cas échéant) un élément graphique particulier peut devenir la cible d'événements de pointeur. Dans le cas de la valeur none ,
L'élément n'est jamais la cible d'événements de pointeur; cependant, les événements de pointeur peuvent cibler ses éléments descendants si ces descendants ont des événements de pointeur définis sur une autre valeur. Dans ces circonstances, les événements de pointeur déclencheront des écouteurs d'événements sur cet élément parent selon le cas sur leur chemin vers / depuis le descendant pendant les phases de capture d'événement / bulle
Pour plus d'informations, vous pouvez visiterhttps://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Bienvenue dans stackoverflow, votre réponse ne contient que du code et il est nécessaire d'y ajouter plus de détails. pour plus d'informations sur les bonnes réponses dans StackOverflow, veuillez consulter stackoverflow.com/help/how-to-answer .
Est-ce mieux ainsi? Merci beaucoup pour les commentaires.
oui, j'ai voté pour votre réponse car elle est de bonne qualité, merci pour votre coopération, bonne chance ...
Merci ! Ça marche pour moi :). Je ne connaissais pas cette propriété css
Essaye ça :
<div click-stop-propagation>Stop Propagation</div>
Ensuite, ajoutez-le simplement à l'élément sur lequel vous le souhaitez:
import {Directive, HostListener} from "@angular/core";
@Directive({
selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
@HostListener("click", ["$event"])
public onClick(event: any): void
{
event.stopPropagation();
}
}
Si vous essayez d'empêcher le comportement par défaut, vous pouvez essayer de mettre '$ event.preventDefault ()' comme première ligne de la méthode onChange.