当单击标题中的 mat-checkbox 时，防止 mat-expansion 面板切换答案

【问题标题】：Prevent mat-expansion panel from toggling when mat-checkbox in Header clicked当单击标题中的 mat-checkbox 时，防止 mat-expansion 面板切换
【发布时间】：2018-09-24 09:01:25
【问题描述】：

当点击标题内的复选框时，我们可以防止展开面板切换吗？以某种方式停止事件传播。现在使用下面的示例代码，当单击复选框时，面板也会切换（打开\关闭）。所需状态是展开面板切换，当单击标题的任何区域时，除了标题内的复选框。

<mat-expansion-panel-header>
  <mat-panel-title>
    Panel Title
  </mat-panel-title>
  <mat-panel-description>
     <mat-checkbox>Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

【问题讨论】：

stackblitz.com/edit/angular-zmkqls?file=src/app/…。另见stackoverflow.com/a/56560771/5456789

标签： javascript html angular angular-material

【解决方案1】：

点击mat-checkbox时可以调用stopPropagation $event方法：

<mat-expansion-panel-header>
  <mat-panel-title>
    Panel Title
  </mat-panel-title>
  <mat-panel-description>
     <mat-checkbox (click)="$event.stopPropagation();">Edit</mat-checkbox>
  </mat-panel-description>
</mat-expansion-panel-header>

【讨论】：

这是停止切换的完美方式吗？
很难说...“完美”意味着几件事，而这种事件管理，在我看来并不是最美丽和完美的方式。但试图回答评论，是的，这是停止切换的“最佳”方式
谢谢您，先生，它也很适合我使用垫子选择
@Kalamarico 如果我有 input 而不是 checkbox 并且我只想禁用 pointer event 第一次输入时不点击任何时候
@Awais bufff，在“快速思考...”中，您可以设置（单击）执行“$event.stopPropagation”并在此之后重新定义自身的函数，例如：“this .myFunc = () => {}" 你知道吗？首先执行 stopPropagation 并在将自身重新定义为空函数后，第一次单击它将停止传播并将自身重新定义为空，因此第二次单击将什么也不做