ng-clic sur les clics sur les parents via les enfants

J’ai un élément

qui a un autre élément

comme enfant.

J’ai ajouté la directive ng-click au parent et je m’attendais à ce qu’il ne soit pas déclenché en cliquant sur l’enfant. Cependant, c’est le cas.

 
You can click through me

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

Voici un JSFiddle démontrant le problème

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

 
You can click through me

Lorsque vous cliquez sur l’élément enfant, son événement est déclenché. Mais ça ne s’arrête pas là. 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énement. Pour arrêter la propagation d’événement (le déclenchement des événements de clic des parents), vous devez utiliser la fonction ci-dessus, stopPropagation .


Exemple de travail

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

Si vous souhaitez définir différentes fonctions pour le parent et l’enfant, vous pouvez envoyer $ event en tant que paramètre de la fonction enfant et stopPropagation à l’intérieur de celui-ci. Comme ça:

 
You can click through me

et dans votre contrôleur:

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