fluent-accordion different function on item and panel-CodePudding

When I add different function on item and title, click on item works fine but click on panel execute both function. Is there a way to resolve that as I need click on item Function_1 and click on panel Function_2

<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  [ngStyle]="{'color': option.color_code}">
                    {{option.count}}
                </span> 
                
            </span>
            
            <div >
            <div *ngFor="let feedback of option.feedback" style="padding: 8px; overflow: auto; border-bottom: 1px solid gray;" (click)="Funcion_2(feedback)"> 
                <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>

i am trying to set different function in this code for item and different for panel click

CodePudding user response：

Using event.stopPropagation() in the inner element as Nikola Batinica said. Inner your function

<div *ngFor="let feedback of option.feedback" (click)="Funcion_2(feedback, event)"> 
</div>

Funtion_2(feedback: string, event: any) {
  event.stopPropagation()
  // rest of your logic
}