javascript - AngularJS ng-单击stopPropagation(AngularJS ng-click stopPropagation)

Question

I have a click Event on a table row and in this row there is also a delete Button with a click Event.(我在表行上有一个单击事件，在这一行中还有一个带有单击事件的删除按钮。)

When i click the delete button the click Event on the row is also fired.(当我单击删除按钮时，也会触发该行上的事件。)

Here is my code.(这是我的代码。)

<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>

How can I prevent that the showUser Event is fired when i click the delete Button in the table cell?(当我单击表格单元格中的删除按钮时，如何防止showUser事件被触发？)

  ask by michael_knight translate from so

Answer 1

ngClick directive (as well as all other event directives) creates $event variable which is available on same scope.(ngClick指令（以及所有其他事件指令）创建$event变量，该变量在相同范围内可用。)

This variable is a reference to JS event object and can be used to call stopPropagation() :(此变量是对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(朋克)