Come impedire l'evento di clic genitore quando l'utente fa clic sul suo elemento figlio? AngularJS

Ho un <div> con un ng-click ma questo <div> ha un elemento figlio con anche una direttiva ng-click. Il problema è che l'evento click sull'elemento bambino grilletto anche caso click dell'elementogenitore.Come impedire l'evento di clic genitore quando l'utente fa clic sul suo elemento figlio? AngularJS

Come posso impedire l'evento di clic genitore quando clicco su suo figlio?

Here is a jsfiddle per illustrare la mia situazione.

Grazie in anticipo per il vostro aiuto.

EDIT

Ecco il mio codice:

<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>

fonte

2015-10-22 KeizerBridge

O girare bubbling degli eventi off per il gestore di bambino o verificare cosa è stato fatto clic nel gestore utilizzando event.target/presente/yourFrameworksImplementationOfEventTarget – Shilly

Si dovrebbe utilizzare il metodo event.stopPropagation(). vedere: http://jsfiddle.net/qu86oxzc/3/

<div id="child" ng-click="childClick($event)"></div> 

$scope.childClick = function($event) { 
    $event.stopPropagation(); 
    ... 
}

fonte

2015-10-22 12:36:44

Upvoted la vostra risposta in quanto è meglio formattato :) –

Ok, mi sento stupido, ma ora grazie che è esattamente quello che voglio Non ci ho pensato perché non ho mai superato l'elemento in generale. Ma c'è un altro modo per eseguire questa operazione senza stopPropagation? – KeizerBridge

si 'potrebbe' fare qualcosa come http://stackoverflow.com/a/33281294/1782659 ma penso che questo sia davvero brutto. Fermare l'evento dal pasticcio più in alto è la cosa giusta da fare (imo) puoi anche guardare la destinazione dell'evento (se $ event.target === childElement) –

Usa event.stopPropagation per fermare il event dalla zampillante l'albero del DOM dal gestore di eventi bambino.

Updated Demo

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 
 
    } 
 
}

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; 
 
}

<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>

fonte

2015-10-22 12:39:12 Tushar

Anche se la risposta di Pieter Willaert è molto più bella ho aggiornato il vostro violino con un semplice controllo booleano:

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; 
    } 
}

fonte

2015-10-22 12:40:42 messerbill

anche tu puoi usare questo come si usa fare lo stesso.

<div id="child" ng-click="childClick();$event.stopPropagation();"></div>

fonte

2015-10-28 11:25:34 Nadeem

Puoi anche provare $event.stopPropagation();. scrivilo dopo la funzione figlio. Funziona come un prevent default.

<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>

fonte

2016-12-23 12:44:40

Come impedire l'evento di clic genitore quando l'utente fa clic sul suo elemento figlio? AngularJS

risposta

Problemi correlati