web-dev-qa-db-fra.com

ng-clic sur le parent clique à travers les enfants

J'ai un élément <div> qui a un autre élément <div> comme enfant. 

J'ai ajouté la directive ng-click au parent et je m'attendais à ce qu'elle ne soit pas déclenchée lorsque vous cliquez sur l'enfant. Cependant, c'est le cas.

<div class="outer" ng-click="toggle()">
    <div class="inner">You can click through me</div>
</div>

Pourquoi fait-il cela et comment puis-je l'éviter?

Voici un JSFiddle démontrant le problème

javascripthtmlcssangularjs
50
Maeh

Vous devez annuler la propagation d'événement afin que l'événement click de l'élément parent ne soit pas appelé. Essayer:

<div class="outer" ng-click="toggle()">
    <div class="inner" ng-click="$event.stopPropagation()">You can click through me</div>
</div>

Lorsque vous cliquez sur l'élément enfant, son événement est déclenché. Mais cela ne s'arrête pas là. Tout d'abord, l'événement click de l'élément enfant est déclenché, puis l'événement click de l'élément parent est déclenché, etc. C'est ce qu'on appelle la propagation d'événements. Pour arrêter la propagation d'événements (déclenchement des événements de clic parents), vous devez utiliser la fonction ci-dessus, stopPropagation. 

Exemple de travail

J'ai ajouté un peu de remplissage CSS, l'exemple est donc plus clair. Sans rembourrage, l'élément enfant occupe tout l'espace intérieur et vous ne pouvez pas cliquer sur le parent sans cliquer sur l'enfant.

86
itd

Si vous souhaitez définir différentes fonctions pour le parent et l'enfant, vous pouvez envoyer $ event en tant que paramètre pour la fonction enfant et stopPropagation. Comme ça:

<div class="outer" ng-click="onParentClick()">
    <div class="inner" ng-click="onChildClick($event)">You can click through me</div>
</div>

et dans votre contrôleur:

function onChildClick(event){
    event.stopPropagation();
    //do stuff here...
}
function onParentClick(){
    //do stuff here..
}
0
Felipe Rugai