Comment prévenir les parents événement click lorsque l'utilisateur clique sur son élément enfant? AngularJS

J'ai un <div> avec un ng-click mais ce <div> ont un élément enfant avec également une ng-click directive.
Le problème est que le événement click sur l'élément enfant déclencher aussi la cliquez sur l'événement de la élément parent.

Comment puis-je empêcher le parent événement de clic quand je clique sur son enfant?

Voici un jsfiddle pour illustrer ma situation.

Je vous remercie d'avance pour votre aide.

MODIFIER

Voici mon code:

<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
    <div id="child" ng-click="childClick()"></div>

    <p ng-bind="elem"></p>
</div>

<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>

<script>
function TestController($scope) {
    $scope.parentClick = function() {
        $scope.elem = 'Parent';
    }

    var i = 1;
    $scope.childClick = function() {
        $scope.elem = 'Child';
        $scope.childElem = 'Child event triggered x' + i;
        i++;
    }
}
</script>

Soit tour de remontée d'événements off pour l'enfant de gestionnaire ou de vérifier ce qui a été cliqué dans le gestionnaire d'événements.cible / ce / yourFrameworksImplementationOfEventtarget

InformationsquelleAutor KeizerBridge | 2015-10-22

24

Vous devez utiliser l'événement.méthode stopPropagation ().
voir: http://jsfiddle.net/qu86oxzc/3/
```
<div id="child" ng-click="childClick($event)"></div>

$scope.childClick = function($event) {
    $event.stopPropagation();
    ...
}
```
- Upvoted votre réponse car il est mieux mis en forme 🙂
- Ok, je me sens bête maintenant mais merci c'est exactement ce que je veux. Je ne pense pas que ça cause je n'ai jamais passer l'élément en général. Mais est-il un autre moyen d'effectuer cette sans stopPropagation ?
- vous "pourrait" faire quelque chose comme stackoverflow.com/a/33281294/1782659 mais je pense que c'est vraiment laid. L'arrêt de l'événement à partir de bubling plus haut est la bonne chose à faire (omi), vous pouvez également regarder la cible de l'événement (si $de l'événement.cible === childElement)
InformationsquelleAutor Pieter Willaert

Utilisation event.stopPropagation pour arrêter le event de remonter l'arborescence DOM à partir d'enfant de gestionnaire d'événements.

mise à Jour de la Démo

JS:

function TestController($scope) {
  $scope.parentClick = function() {

    $scope.elem = 'Parent';
  }

  var i = 1;
  $scope.childClick = function(e) {
    $scope.elem = 'Child';
    $scope.childElem = 'Child event triggered x' + i;
    i++;

    e.stopPropagation(); //Stop event from bubbling up
  }
}

CSS:

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#parent {
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 1;
  margin: 10px auto 0 auto;
  background-color: #00acee;
  border-radius: 2px;
  cursor: pointer;
}
#parent:hover {
  opacity: 0.5;
}
#child {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background-color: #FFF;
  border-radius: 2px;
  cursor: pointer;
}
#child:hover {
  opacity: 0.5;
}
#parent p {
  width: 100%;
  position: absolute;
  bottom: 0px;
  text-align: center;
  color: #FFF;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<body ng-app ng-controller="TestController">
  <div id="parent" ng-click="parentClick()">
    <div id="child" ng-click="childClick($event)"></div>
    <!--                                 ^^^^^^^     -->
    <p ng-bind="elem"></p>
  </div>
  <div>
    <p style="text-align:center" ng-bind="childElem"></p>
  </div>
</body>

InformationsquelleAutor Tushar

4

aussi, vous pouvez l'utiliser comme il l'utiliser à faire de même.
```
<div id="child" ng-click="childClick();$event.stopPropagation();"></div>
```
InformationsquelleAutor Nadeem

Même si Pieter Willaert la réponse est beaucoup plus belle j'ai mis à jour votre violon avec un simple booléen vérifier:

http://jsfiddle.net/qu86oxzc/6/

function TestController($scope) {
    $scope.boolean = false;
    $scope.parentClick = function () {
        if (!$scope.boolean) $scope.elem = 'Parent';
        $scope.toggleBoolean();
    }

    var i = 1;
    $scope.childClick = function () {
        $scope.boolean = true;
        $scope.elem = 'Child';
        $scope.childElem = 'Child event triggered x' + i;
        i++;
    }

    $scope.toggleBoolean = function () {
        $scope.boolean = !$scope.boolean;
    }
}

InformationsquelleAutor messerbill

Vous pouvez également essayer $event.stopPropagation();. écrire après la fonction d'enfant. Il fonctionne comme un preventdefault.

<body ng-app ng-controller="TestController">
<div id="parent" ng-click="parentClick()">
    <div id="child" ng-click="childClick();$event.stopPropagation();"></div>

    <p ng-bind="elem"></p>
</div>

<div><p style="text-align:center" ng-bind="childElem"></p></div>
</body>

InformationsquelleAutor Ajay Gupta

Vous devez vous connecter pour publier un commentaire.