stopPropagation事件

发表于 更新于 分类于

最近在写业务时出了一个问题
场景：需要在Table上添加行点击事件，Table的某一列中有一个按钮，绑定了click事件。问题是在点击按钮触发click事件的同时，也触发了行点击事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<nz-table #basicTable [nzData]="dataSet">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Address</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data"
       (click)="goBasicDetail(data)">
        <td>{{data.name}}</td>
        <td>{{data.age}}</td>
        <td>{{data.address}}</td>
        <td>
          <a (click)="goGoods()">Goods － {{data.name}}</a>
          <nz-divider nzType="vertical">
          </nz-divider>
          <a>Delete</a>
        </td>
      </tr>
    </tbody>
</nz-table>

拿上面的例子来说，点击a标签之后，触发goGoods()的同时也触发了goBasicDetail(data)，这个不是我想要的。
经过半小时研究之后，快吐血了😵
只需要在带有click的列中，绑定$event.stopPropagation()事件就好了。。。

1
2
3
<td (click)="$event.stopPropagation()">
    <a (click)="goGoods()">Action 一 {{data.name}}</a>
</td>

event.stopPropagation() 是用来阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。

这样一来就通了，开始还以为Angular变更检测机制使DOM事件执行了多次。。看来还是理解不够深，加强基础知识！💪