AngularJS ng-单击stopPropagation


433

我在表行上有一个单击事件,在这一行中还有一个带有单击事件的删除按钮。当我单击删除按钮时,也会触发该行上的单击事件。

这是我的代码。

<tbody>
  <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>{{user.email}}</td>
    <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
  </tr>
</tbody>

showUser当我单击表格单元格中的删除按钮时,如何防止触发事件?

Answers:


801

ngClick指令(以及所有其他事件指令)创建$event在相同范围内可用的变量。此变量是对JS event对象的引用,可用于调用stopPropagation()

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>

PLUNKER


2
我不知道这是否在控制器代码中可用-$ scope。$ event似乎不起作用。有任何想法吗?
user1338062 2014年

93
@event对象是在ng-click指令内部创建的,您可以将其传递给ng-click处理函数:ng-click="deleteUser(user.id, $event)"
Stewie 2014年

6
谢谢,有点想那个,但我认为它仍然很臭:)
user1338062 2014年

2
我认为执行这样的多个表达式是一种反模式。为什么不将$ event作为第三个参数传递给deleteUser(),然后在该函数内部传递stopPropagation()呢?
djheru 2015年

18
我也必须添加$event.preventDefault(),否则$event.stopPropagation()单击该按钮时,调用会将我重定向到我的应用程序的根目录。
Desty

124

Stewie的答案的补充。如果您的回调决定是否应停止传播,我发现将$event对象传递给回调很有用:

<div ng-click="parentHandler($event)">
  <div ng-click="childHandler($event)">
  </div>
</div>

然后在回调本身中,您可以决定是否应停止事件的传播:

$scope.childHandler = function ($event) {
  if (wanna_stop_it()) {
    $event.stopPropagation();
  }
  ...
};

10
这比在html属性中执行多个表达式更为优雅,谢谢
Eason

3
请记住在HTML ng-click指令中添加“ $ event”参数。起初我偶然发现了这一点。
ThinkBonobo

1
要立即停止,最好使用$ event.stopImmediatePropagation()
Edgar Chavolla

如此简单,却被忽略。我看着选定的答案,然后想“真的吗?这很丑吗?”。甚至都没有意识到将其作为参数传递。非常好。
tfrascaroli

10

我写了一条指令,可让您限制点击有效的区域。它可以用于类似这种情况的某些情况,因此您不必说要逐案处理点击,而只需说“点击不会脱离此元素”即可。

您可以这样使用它:

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td isolate-click>
      <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
      </button>
    </td>              
  </tr>
</table>

请记住,这将阻止所有单击最后一个单元格,而不仅仅是按钮。如果这不是您想要的,则可以像这样包装按钮:

<span isolate-click>
    <button class="btn" ng-click="deleteUser(user.id, $index);">
        Delete
    </button>
</span>

这是指令的代码:

angular.module('awesome', []).directive('isolateClick', function() {
    return {
        link: function(scope, elem) {
            elem.on('click', function(e){
                e.stopPropagation();
            });
        }
   };
});

真好!我将您的指令重命名为ngClick,因为我实际上从不希望传播已处理的事件。
maaartinus's

1
小心点。其他一些插件可能实际上想听那些点击。如果您使用在外部单击时关闭的工具提示,则它们可能永远不会关闭,因为外部点击不会传播到身体。
詹斯

很好,但是您的指令也会发生此问题。也许我应该只添加一个类似于ignoreNgClick=true事件的属性并以某种方式处理它。理想情况下,使用原始ngClick指令,但对其进行修改听起来很脏。
maaartinus

是的,确实如此,这就是为什么除非我真正需要它,否则我不会使用该指令。由于这个原因,我什至不得不做出另一个指令来继续点击传播。所以我有一个isolate-click指令,然后几个父母又有了另一个continue-click指令。这样,仅跳过中间元素的单击。
延斯

1

如果您使用的是我这样的指令,例如在更新任何模型或集合中的属性后需要两个数据方式绑定时,这就是它的工作方式:

angular.module('yourApp').directive('setSurveyInEditionMode', setSurveyInEditionMode)

function setSurveyInEditionMode() {
  return {
    restrict: 'A',
    link: function(scope, element, $attributes) {
      element.on('click', function(event){
        event.stopPropagation();
        // In order to work with stopPropagation and two data way binding
        // if you don't use scope.$apply in my case the model is not updated in the view when I click on the element that has my directive
        scope.$apply(function () {
          scope.mySurvey.inEditionMode = true;
          console.log('inside the directive')
        });
      });
    }
  }
}

现在,您可以轻松地在任何按钮,链接,div等中使用它,如下所示:

<button set-survey-in-edition-mode >Edit survey</button>

-14
<ul class="col col-double clearfix">
 <li class="col__item" ng-repeat="location in searchLocations">
   <label>
    <input type="checkbox" ng-click="onLocationSelectionClicked($event)" checklist-model="selectedAuctions.locations" checklist-value="location.code" checklist-change="auctionSelectionChanged()" id="{{location.code}}"> {{location.displayName}}
   </label>



$scope.onLocationSelectionClicked = function($event) {
      if($scope.limitSelectionCountTo &&         $scope.selectedAuctions.locations.length == $scope.limitSelectionCountTo) {
         $event.currentTarget.checked=false;
      }
   };


7
您是否会解释为什么您会回答这个问题?
paisanco

有点回答问题。它显示了如何将事件传递给回调,这比最初的问题要多。
hewstone16年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.