Dinesh Sundaraneedi Dinesh Sundaraneedi - 3 months ago 14
Javascript Question

stopPropogation not working as expected

I am using panel bootstrap accordion.

When we click anywhere, on panel head will collapse panel body
but there is one inline span element with click event
so,i need to prevent

collapse in
class of panel body and i need to trigger span click event.

my approach:

for this,
I used
$event.stopPropogation()


html

<div class="panel-group" id="accordion2">
<div class="panel" ng-repeat="uniqueId in uniqueIds">
<div class="panel panel-heading" data-toggle="collapse" data-parent="#accordion2" data-target="#{{uniqueId}}">
<span>{{uniqueId}}</span>
<span class="pull-right" ng-click="fnShowJdTrack()">Track JD</span>
</div>
<div id="{{uniqueId}}" class="panel-collapse collapse">
<div class="panel-body">
<!-- content here -->
</div>
</div>
</div>
</div>


ctrl

$scope.fnShowJdTrack = function() {
$event.stopPropagation();
//some other action here
};

Answer

You need to pass the $event object to the function.

<span class="pull-right" ng-click="fnShowJdTrack($event)">Track JD</span>

And in your controller:

$scope.fnShowJdTrack = function($event) {
  $event.stopPropagation();
  //some other action here
};

See this answer: http://stackoverflow.com/a/20301030/863110

For example:

angular.module('app', [])
.controller('ctrl', function($scope){
  $scope.stop = true;
  
  $scope.outerClick = function(){
    alert('outer');
  };

  $scope.innerClick = function($event) {
    if ($scope.stop) {
      $event.stopPropagation();
    }
    alert('inner');
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <label><input type="checkbox" ng-model="stop" /> stopPropagation</label>
  <div ng-click="
outerClick()">
    <div ng-click="innerClick($event)">Inner div</div>
  </div>
</div>