Angular 6 bootstrap 多选项目单击触发两次答案

【问题标题】：Angular 6 bootstrap multiselect item click firing twiceAngular 6 bootstrap 多选项目单击触发两次
【发布时间】：2020-03-13 12:26:18
【问题描述】：

我有下面的堆栈闪电

当我将点击事件表单 li 移动到输入更改时，它触发了一次，但是

event.stopPropagation();

不工作。

https://stackblitz.com/edit/bootstrap-pvjfbv?file=index.html

请帮助我花了很多时间，但无法使其工作

【问题讨论】：

(change)="SelectElementCliked($event,item)" 使用更改事件而不是点击事件
我很努力，但它不起作用，

标签： javascript angular bootstrap-4 angular6

【解决方案1】：

你必须发出@output

在模板文件中 - 在输入复选框而不是 li 上应用更改事件

 <li *ngFor="let item of data_source"  >
    <label class="checkboxcontainer checkbox-inline">
          <input type="checkbox"  (change)="SelectElementCliked($event, item)"/>
           <span class="checkmark"></span>
           <span class="text">{{item.Text}}</span>
     </label>
</li>

在ts文件中

 SelectElementCliked(event: any, item: any) {

      if ( event.target.checked ) {
        console.log(item);
         this.onItemSelected.emit(item);
      }

    }

【讨论】：

我在分叉时错过了那个 emiit，我更新了，但那不起作用，它触发了两次

【解决方案2】：

移除 'input' 标签周围的 'label' 元素可以解决问题。

<div class="flx" style="align-items: flex-start">
    <div style="flex: 1;">       
        <div class="dropdown_23 drp-custom-select-container modal-select-custom">
            <div class="btn-group keepopen bootstrap-select form-control input-sm ddlcustomselect" data="Select">
                <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button">
                    <span #spnSelectedText class="filter-option pull-left" style="width: calc(100% - 20px);overflow: hidden;margin-right: 20px;">Select</span>&nbsp;
                    <span class="bs-caret">
                        <span class="caret"></span>
                    </span>
                </button>
                <div class="dropdown-menu open" role="combobox" style="max-height: 482px; overflow: hidden;">
                    <ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 470px; overflow-y: auto;">

                            <li *ngFor="let item of data_source" (click)="SelectElementCliked($event,item)" >                                
                                    <input type="checkbox"/>
                                    <span class="checkmark"></span>
                                    <span class="text">{{item.Text}}</span>                                
                            </li>                                             
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Refer this

【讨论】：

这个不能被移除，因为它有 UI 依赖
我分享的链接有解决方案，在保留标签的同时修复它。看看
是的，我可以用多种方式处理，但我想知道为什么会这样
回答原因：stackoverflow.com/questions/30783660/…
@StepUp，感谢您提供时间，但正如我所说，我无法更改元素，因为它具有由其他人开发的 UI 依赖项

【解决方案3】：

将

内容更改为如下解决问题

<li *ngFor="let item of data_source" (click)="SelectElementCliked($event,item)" >
                            <label class="checkboxcontainer checkbox-inline">
                                <input [id]="item.Value" [name]="item.Value" type="checkbox"  />
                                <span class="checkmark"></span>
                                <label  (click)="$event.stopPropagation()" [for]="item.Value" class="text">{{item.Text}}</label>
                            </label>
                        </li>

点击标签时，2 个事件被传播到父组件，因此发出 2 个事件。您可以使用 stopproagation 阻止标签元素的点击

【讨论】：

@Md. Parvez Alam：“为什么”是由于事件冒泡