Question

我正在使用面板自举手风琴。

当我们点击任何地方时，面板头部会折叠面板主体但是有一个带有click事件的内联span元素所以，我需要阻止collapse in类面板体，我需要触发跨度点击事件。

我的方法：

为此，我使用了$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 1

您需要将$event对象传递给函数。

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

在你的控制器中：

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

请参阅此答案：https://stackoverflow.com/a/20301030/863110

例如：

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>

stopPropogation无法按预期工作

1 个答案: