html - 单击嵌套跨度时如何防止触发 onClick 函数

Question

我正在尝试禁用自定义按钮组件，但当用户单击 span 元素时， (click) 函数会触发。

我的用例是，如果自定义按钮组件被禁用，则不应调用 onClick 函数。

自定义按钮.component.ts

<div [ngClass]="isDisabled ? ('input-group disabled ') : ('input-group cursor-hand')" *ngIf="!hidden" >
  <span class="input-group-addon btn-addon btn-icon {{iconBgClass}}"*ngIf="iconClass ? true : false" [ngClass]="isDisabled ? ('input-group disabled ') : ('input-group cursor-hand')">
    <span [ngClass]="iconClass" *ngIf="iconClass ? true : false" ></span> <!-- iconet  -->
  </span>
  <button class="cursor-hand btn btn-primary {{customBtnColor}}" [disabled]="isDisabled" *ngIf="labelText?true:false" >
    {{ labelText }}
  </button>
</div>

按钮的使用方式如下:

potato.component.ts

<custom-button click=doStuff()" [iconClass]="'icon-done'" 
[isDisabled]="!changeMade" [labelText]="Fry potato">
</custom-button>

如果 changeMade 为 false，则按钮组件完全变灰。目前，点击按钮的跨度部分仍然会触发该功能。

Answer 1

很简单，通过更改 span 元素的 css 光标样式，您将禁用正在触发的事件，您可以内联或在 css 文件中创建一个新类，如下所示:

.disableSpan {
   pointer-events:none;
}

然后在html上

<div [ngClass]="isDisabled ? ('input-group disabled ') : ('input-group cursor-hand')" *ngIf="!hidden" >
  <span  class="disableSpan input-group-addon btn-addon btn-icon {{iconBgClass}}"*ngIf="iconClass ? true : false" [ngClass]="isDisabled ? ('input-group disabled ') : ('input-group cursor-hand')">
    <span [ngClass]="iconClass" *ngIf="iconClass ? true : false" ></span> <!-- iconet  -->
  </span>
  <button class="cursor-hand btn btn-primary {{customBtnColor}}" [disabled]="isDisabled" *ngIf="labelText?true:false" >
    {{ labelText }}
  </button>
</div>

编辑:

我想我已经错过了只有当变量“isDisabled”设置为 true 时才应用此效果的要点，如果是这样，您可以使用 [class.'cssClass'] 标记如果 set 变量设置为 true，则应用于您的 html 元素，在您的情况下:

<div [ngClass]="isDisabled ? ('input-group disabled ') : ('input-group cursor-hand')" *ngIf="!hidden" >
  <span [class.disableSpan]="isDisabled" class="input-group-addon btn-addon btn-icon {{iconBgClass}}"*ngIf="iconClass ? true : false" [ngClass]="isDisabled ? ('input-group disabled ') : ('input-group cursor-hand')">
    <span [ngClass]="iconClass" *ngIf="iconClass ? true : false" ></span> <!-- iconet  -->
  </span>
  <button class="cursor-hand btn btn-primary {{customBtnColor}}" [disabled]="isDisabled" *ngIf="labelText?true:false" >
    {{ labelText }}
  </button>
</div>