Fluent-Accordion点击项与面板触发重复函数问题求助

这是事件冒泡导致的问题：面板内的元素属于<fluent-accordion-item>的子节点，点击面板元素时，点击事件会向上传递到父级的<fluent-accordion-item>，所以会同时触发绑定的Funcion_1和Funcion_2。

解决方法一：在模板中直接阻止事件冒泡 #

修改面板内元素的点击事件，添加$event.stopPropagation()来阻止事件向上冒泡：

<fluent-accordion expand-mode="single">
        <fluent-accordion-item  *ngFor="let option of scope_summary" (click) = "Funcion_1(option.feedback)" [ngStyle]="{'background-color': option.color_code, 'position': 'relative'}">
            <span slot="heading" >
                {{option.display_name}}
                <span class="scope_badge" [ngStyle]="{'color': option.color_code}">
                    {{option.count}}
                </span> 
                
            </span>
            
            <div class="panel">
            <!-- 添加$event.stopPropagation()阻止事件冒泡 -->
            <div *ngFor="let feedback of option.feedback" style="padding: 8px; overflow: auto; border-bottom: 1px solid gray;" (click)="Funcion_2(feedback); $event.stopPropagation()"> 
                <div *ngFor="let text of feedback.comments"
                 style="float: left; width: 85%;">{{text}}</div>
                <span [ngStyle]="{'background-color': option.color_code}"
                    style="float: left; width: 30px; height: 27px; text-align: center; font-size: 16px; margin-left: 8px; border-radius: 5px; padding-top: 4px;">
                    {{feedback.location.length}}</span>
            </div>
            </div>
        </fluent-accordion-item>
    </fluent-accordion>

解决方法二：在组件方法中阻止事件冒泡 #

如果不想在模板里写逻辑，可以在Funcion_2方法中接收事件参数并阻止冒泡：

1. 组件类中修改方法：

Funcion_2(feedback: any, event: Event) {
  // 阻止事件向上冒泡
  event.stopPropagation();
  // 你的原有业务逻辑代码
}

2. 模板中传递事件参数：

<div *ngFor="let feedback of option.feedback" style="padding: 8px; overflow: auto; border-bottom: 1px solid gray;" (click)="Funcion_2(feedback, $event)"> 

这样修改后，点击面板内元素只会触发Funcion_2，点击<fluent-accordion-item>的头部区域则只会触发Funcion_1。

内容的提问来源于stack exchange，提问作者Nikola Batinica