Angular 防止复选框触发onclick折叠事件

因此，我的应用程序中有多张卡，每张卡都有一个标题组件，单击该组件后，将折叠该卡，以便您只看到标题。我遇到的问题是，一些标题包含复选框，单击复选框会触发标题的单击事件。有没有关于防止这种情况发生的建议

<md-card>
   <md-card-content>
      <md-toolbar (click)="toggleSection()">
         <span>{{section.Name}}</span>
         <md-checkbox [(ngModel)]="section.isChecked">(Check to include section)</md-checkbox>
      </md-toolbar>
   </md-card-content>
</md-card>

---

您的工具栏正在环绕复选框，当您单击复选框时，实际上是在单击。您可以做一些事情，将复选框放在单独的div/span中，给它一个更高的z索引，使用event.preventDefault；在您的toggleSection函数中。

您需要澄清一点，您的意思是当您单击复选框时它会触发吗？将复选框置于单独的div/span中。是。当您单击复选框时，该部分将折叠，我不希望发生这种情况。复选框是它自己的实体。将复选框包装在div中无效