stopPropogation not working as expected

Question

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

Add event in your function! function(event) – Teuta Koraqi Aug 11 '16 at 11:25 — Teuta Koraqi, Aug 11 '16 at 11:25
function(e) { e.stopPropagation(); }; – Velimir Tchatchevsky Aug 11 '16 at 11:25 — Velimir Tchatchevsky, Aug 11 '16 at 11:25
I tried that way its not working :( – Dinesh Sundaraneedi Aug 11 '16 at 11:26 — Dinesh Sundaraneedi, Aug 11 '16 at 11:26
try stopImmediatePropagation instead of stopPropagation – Rakesh G R Aug 11 '16 at 11:28 — Rakesh G R, Aug 11 '16 at 11:28

score 1 · Accepted Answer · edited May 23 '17 at 12:32

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: https://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>

Yes. You have to pass the `$event` exactly string. You can pass both of them: `fnShowJdTrack('show.bs.collapse', $event)`. Also, `show.bs.collapse` is not an `event` object. Is suppose to be a string and bootstrap. Let it go, bro it's not relevant.. Just pass the `$event` object as is. — Mosh Feu, Aug 11 '16 at 11:38

stopPropogation not working as expected

1 Answers1