AngularJS ng-click stopPropagation

javascript angularjs angularjs-ng-click

2022-08-29 23:16:49

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

这是我的代码。

<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

答案 1

ngClick 指令（以及所有其他事件指令）创建在同一作用域上可用的变量。此变量是对 JS 对象的引用，可用于调用：$eventeventstopPropagation()

<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

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

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

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

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