防止点击放大手风琴

Question

我有一个Primeng手风琴，而手风琴头有一个复选框控件。每当我选中/取消选中复选框时，手风琴选项卡就会自动打开/关闭

有什么方法可以防止单击复选框时扩展/折叠？应该在标头上展开/折叠，而不是选中/取消选中复选框？

Answer 1

这就是我解决此问题的方法。这是由于事件冒泡而发生的。因此，当您单击子元素时。事件传播到其父对象，依此类推。因此，只需在事件上使用停止传播。这将防止您的手风琴发生click事件。下面的代码供您参考。

带有我使用的复选框代码的伴奏（onChange）方法。

<p-accordionTab>
    <p-header>
      <div class="ui-g" style="width:250px;margin-bottom:10px">
        <div class="ui-g-12"><p-checkbox name="group1" #ck value="New York" label="New York" [(ngModel)]="selectedCities" (onChange)="checkChange($event)" inputId="ny"></p-checkbox></div>
        </div>
  </p-header>
  </p-accordionTab>

component.ts

selectedCities: string[] = [];
//Simply you have to to stop propogation here. 
checkChange(e:any){
        console.log(e); // true or false.
        event.stopPropagation(); // component will have direct access to event here.
}

Answer 2

这是由于事件冒泡引起的。为此，需要通过调用stopPropagation()中的MouseEvent来停止eventPropagation。

Accordion html代码示例

<p-accordion>
    <p-accordionTab header="Godfather I" [selected]="true">
        <p-header>
            <span>Godfather I
              <input type="checkbox" (click)="onClick($event)">
            </span>
        </p-header>
        Some Text
    </p-accordionTab>
</p-accordion>

相应的组件 ts代码。

onClick($event: MouseEvent){
    $event.stopPropagation();
}

供参考，添加了stackblitz代码示例。