javascript - Angular 2 - 当按钮放置在可选择的 anchor 内时无法运行正确的功能

Question

我有一个可选择的 anchor ，并为其分配了一个 (click) 监听器。在这个 anchor 内是一个按钮(用于编辑弹出模块)，它有自己的 (click) 监听器。

例子:

<a (click)="onClick(myId)" class="list-group-item clearfix">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{name}}</h4>
  </div>
  <div style="float: right">
    <button type="button" (click)="onEdit(myId)" pButton class="ui-button-myButton" icon="fa-pencil"></button>
  </div>​
</a>

我无法调用 (click)="onEdit(myId)" 只有当它被点击时没有触发第一个函数 (click)="onClick(myId)" 作为调用的两个函数。

我试过将两个函数命名为相同的名称并传递一个 bool 值(例如，如果 true 则运行第一个函数，如果 false 则运行第二个函数)但是这两个事件都会发生。

我也试过将第一个 onClick(myId) 分配给第一个 div 但这只会在选择文本(而不是整个 anchor )时触发监听器。

Answer 1

这是因为事件冒泡。您需要将 $event 对象传递给函数并调用 event.stopPropagation();

<div style="float: right">
   <button type="button" (click)="onEdit($event, myId)" pButton class="ui-button-myButton" icon="fa-pencil"></button>
</div>​

在函数调用中

onEdit(event, myId) {
   event.stopPropagation();
   // then your logic
}

您的函数将采用两个参数，第一个是 event 对象，第二个是您的 id。

事件冒泡

当 element3 触发了一个 event 时， element2 也会触发同样的 event 并且元素 1。您可以使用 stopPropagation() 函数停止此执行。

---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        element3                 |
-----------------------------------