我在表行上有一个点击事件,在这一行中还有一个带有点击事件的删除按钮。当我单击删除按钮时,该行上的单击事件也被触发。
这里是我的代码。
<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