可点击的面板标题与标题按钮重叠

Question

我有一个面板组件，它的标题和按钮位于右上角。

目前向下箭头（V 形）切换面板内容的扩展/最小化。

当我尝试实现标题可单击以控制面板内容的扩展/最小化时，这也会影响“+”符号按钮可点击事件，从而导致面板扩展/最小化，这是不希望的。

(click)="toggleShowHide()" 不应影响“+”按钮

如何让“+”符号不受整个标题可点击事件的影响？ 请记住，其他按钮将来也可能会加入“+”符号

dashboard.html

<div style="width: 600px">
  <custom-panel heading="TABLE" enableShowHide="true">
    <span class="panel-tools" >
      <div class="input-group">
        <span  title="New content" (click)="addContent()">
          <i class="tools-plus fas fa-plus" aria-hidden="true"></i>
        </span>
      </div>
    </span>
    //content
  </custom-panel>
</div>

panel.html

<div class="panel panel-custom">
  <div class="panel-heading" *ngIf="heading"  (click)="toggleShowHide()">
    {{heading}}

    <span *ngIf="enableShowHide" class="float-right panel-chevron" (click)="toggleShowHide()" style="cursor: pointer;">
      <i [hidden]="!showPanel" title="Hide" class="tools-plus fas fa-chevron-down" aria-hidden="true"></i>
      <i [hidden]="showPanel" title="Show" class="tools-plus fas fa-chevron-right" aria-hidden="true"></i>
    </span>

    <span class="float-right">
      <ng-content select=".panel-tools"></ng-content>
    </span>
  </div>

  <div class="panel-body" [ngClass]="{'panel-scrolling': panelScrolling }" [hidden]="shouldHidePanel()">
    <div class="mb-3">
    </div>

    <ng-content></ng-content>
  </div>
</div>

panel.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'panel',
  templateUrl: './panel.component.html',
  styleUrls: ['./panel.component.scss']
})
export class PanelComponent {
  @Input() heading: string;
  @Input() size: string;
  @Input() panelScrolling = false;
  @Input() enableShowHide = false;
  @Input() hideFirst = false;
  showPanel = true;

  toggleShowHide(): void {
    this.showPanel = !this.showPanel;
  }

  shouldHidePanel(): boolean {
    if (this.enableShowHide) {
      if (this.hideFirst) {
        this.showPanel = false;
        this.hideFirst = false;
      }

      return !this.showPanel;
    }

    return false;
  }
}

panel.scss

.panel-body {
  padding: 12px;
}

.panel-custom {
  margin: 10px 15px 10px 0;
  border: none;
  border-radius: 0;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  background-color: white;

  .panel-heading {
    color: black;
    font-size: 16px;
    border-bottom: 1px solid black;
    padding: 8px 12px;
    @media (max-width: 1500px) {
      font-size: 14px;
    }
  }

Answer 1

我建议您了解“event bubbling”，因此您在父元素上添加了事件侦听器，它会自动为所有子元素设置它（具有自己的事件处理程序并停止传播父事件的元素除外（例如链接))。

因此，您可以在事件处理程序方法中使用 event 对象中的方法“stopPropagation”作为参数

写在cmets中，如果你需要什么，我会尽力帮助你。

Answer 2

阻止事件从原点进一步传播是个好主意。

<div class="panel-heading" *ngIf="heading" (click)="toggleShowHide($event)">
<span title="New content" (click)="addContent($event)">

  toggleShowHide(event : any): void {
    event.stopPropagation();
    this.showPanel = !this.showPanel;
  }

  addContent(event : any): void {
    event.stopPropagation();
  }