AngularJS ng-click stopPropagation

发布时间：2020-12-17 09:37:03 所属栏目：安全来源：网络整理

导读：我在表行上有一个点击事件，在这一行中还有一个带有点击事件的删除按钮。当我单击删除按钮时，该行上的单击事件也被触发。这里是我的代码。 tbody tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user,$index)" td{{user.first

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

这里是我的代码。

<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事件？

ngClick指令(以及所有其他事件指令)创建在同一范围内可用的$ event变量。此变量是对JS事件对象的引用，可用于调用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!