html - 避免事件冒泡问题，以便在 IE11 中使用预输入查看更多选项

Question

我有一个输入搜索组件，其中有一个预先输入的输入字段。输入搜索.component.html

<input [typeahead]="data" [typeaheadItemTemplate]="sampleTemplate"  (typeaheadOnSelect)="selectedListItem(event$)"/>

并且示例模板有一个文本字段来显示数据，最后它有一个查看全部按钮。

<ng-template #sampleTemplate let-model ="item" let-index="index"><label>model.name</label><button *ngIf="index === maximumCount" (click)="callSeeAllFunction()"> see all results</button></ng-template>

因此，如果我们单击任何列表项 selectedListItem(event$) 将被触发。不幸的是，单击查看所有结果 selectedListItem(event$) 被调用，而不是 IE11 中的 callSeeAllFunction()。

在 callSeeAllFunction() 函数中添加了 event.stopPropagation()。

标签： htmlangularbootstrap-4angular-ui-bootstrap