单击行中的按钮时 tr 标签中不需要的功能触发

Question

我有一个 table，每行都有一个按钮。

          <tbody>
            <tr *ngFor="let user of users" (click)="accountDetails(user._id)">

                <td>{{user.firstName | titlecase}} {{user.lastName | titlecase}}</td>
                <td>{{user.email}}</td>
                <td>{{user.mobile}}</td>
                <td">
                  <button type="button" class="btn btn-primary"
                    (click)="blockUnblock(user._id, 1)">UnBlock</button>
                </td>

            </tr>
          </tbody>

这里我在标签中有一个点击功能，在标签按钮中也有一个。

我需要单击该行以执行 accountDetails()，但同时单击该按钮时，accountDetails() 与 blockUnblock() 一起被触发。

我怎样才能让 accountDetails() 在行的其余部分工作，除了点击按钮

Answer 1

您可以使用 Event.stopPropagation()

阻止 parents 上的点击事件传播

您可以在 Angular 中的 html 中内联此方法：

(click)="blockUnblock(user._id, 1); $event.stopPropagation()"
                                    ^^^^^^^^^^^^^^^^^^^^^^^