点击主音手风琴，防止扩展

2 回答

• 0

  这是因为 Event Bubbling 而发生的 . 为此需要通过调用 MouseEvent 的 stopPropagation() 来停止eventPropagation .

  手风琴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>
  

  对应的 component ts代码 .

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

  对于Reference，添加了stackblitz代码示例 .

  回复于 2024-05-09T08:40:58+08:00
• 0

  这就是我解决这个问题的方法 . 这是因为事件冒泡而发生的 . 所以当你点击子元素时 . 事件传播到其父级，依此类推 . 所以只需在事件中使用停止传播 . 它将阻止手风琴上的点击事件 . 下面的代码供您参考 .

  与我使用的复选框代码Accordian（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.
  }
  

  回复于 2024-05-09T08:40:58+08:00