在选项中选择嵌套标签可防止调用方法

【问题标题】：Selecting nested tags within options prevents method from being called在选项中选择嵌套标签可防止调用方法
【发布时间】：2019-12-23 18:51:54
【问题描述】：

当我单击带有选项的任意位置时，我正在尝试调用方法。

当您单击选项中的任何嵌套标签时，选择托盘将消失而不调用该方法。

如果您选择任何空白或任何未嵌套的文本，则将调用该方法。

<mdb-auto-completer 
    #completerBillTo
    #auto="mdbAutoCompleter"
    textNoResults="I have found no results :("
    [appendToBody]="true">
        <mdb-option 
            *ngFor="let billTo of resultsBillTo | async"
            [value]="billTo.name"
            (click)="updateAccountInfo( billTo, _accountService.accountFormGroup)">
                <small><strong> Id: {{ billTo.id }} </strong></small>
                {{ billTo.name }}
                <small>Value: {{ billTo.value }}</small>
        </mdb-option>
</mdb-auto-completer>

我尝试创建一个覆盖 div 并将其放置在所有元素的前面，但单击该 div 不会在单击时调用任何内容。

【问题讨论】：

标签： html angular bootstrap-material-design

【解决方案1】：

从docs，mdbAutoCompleter 有一个select 事件。选择选项后，事件将触发。

<mdb-auto-completer 
    #completerBillTo
    #auto="mdbAutoCompleter"
    textNoResults="I have found no results :("
    [appendToBody]="true"
    (select)="updateAccountInfo($event)"
>
    <mdb-option 
        *ngFor="let billTo of resultsBillTo | async"
        [value]="billTo"
    >
        <small><strong> Id: {{ billTo.id }} </strong></small>
        {{ billTo.name }}
        <small>Value: {{ billTo.value }}</small>
    </mdb-option>
</mdb-auto-completer>

如果只是在你选择标签的时候，你可以用 css 解决这个问题：

<mdb-option class="parent-class">

.parent-class {
  small, strong {
    pointer-events: none;
  }
}

这将删除small 和strong 元素的点击事件。

【讨论】：