Angular中如何让禁用状态的按钮仍触发点击事件？

浏览器原生的disabled属性会直接阻止元素触发点击事件，要实现“视觉禁用但仍能触发点击逻辑”的效果，可采用以下几种实用方案：

方法一：用容器包裹按钮，把点击事件绑定到容器 #

给按钮外层套一个容器，将点击事件绑定在容器上，同时通过CSS让容器覆盖按钮区域。这样即使按钮处于disabled状态，点击容器仍能触发目标方法。

<div class="btn-wrapper" (click)="validateCustomReRunParameters()">
  <button
    *ngIf="overrideSplitByAccountEnabled && 
    (!overrideSplitByaccountListOfAcc && 
    !overrideSplitByAccountGroupValue) || ((isStartTimeInputPresent && 
    !isValidStartTimestamp) || (isEndTimeInputPresent && 
    !isValidEndTimestamp))"
    type="button" class="btn btn-primary" 
    disabled>
    <i class="glyphicon glyphicon-send" ></i>
    Send action
  </button>
</div>

对应的CSS样式：

.btn-wrapper {
  display: inline-block;
  position: relative;
}

.btn-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

方法二：移除disabled属性，用CSS模拟禁用视觉效果 #

放弃原生disabled属性，通过自定义CSS类实现和禁用状态一致的视觉表现，这样按钮的点击事件可以正常触发。

<button
  *ngIf="overrideSplitByAccountEnabled && 
  (!overrideSplitByaccountListOfAcc && 
  !overrideSplitByAccountGroupValue) || ((isStartTimeInputPresent && 
  !isValidStartTimestamp) || (isEndTimeInputPresent && 
  !isValidEndTimestamp))"
  type="button" class="btn btn-primary custom-disabled"
  (click)="validateCustomReRunParameters()">
  <i class="glyphicon glyphicon-send" ></i>
  Send action
</button>

对应的CSS样式：

.custom-disabled {
  opacity: 0.65;
  cursor: not-allowed;
  /* 不要加pointer-events:none，否则会阻止点击事件 */
}

方法三：替换事件类型（兼容性需测试） #

部分浏览器中，disabled元素会阻止click事件，但不会阻止mouseup或mousedown事件，可尝试替换事件绑定：

<button
  *ngIf="overrideSplitByAccountEnabled && 
  (!overrideSplitByaccountListOfAcc && 
  !overrideSplitByAccountGroupValue) || ((isStartTimeInputPresent && 
  !isValidStartTimestamp) || (isEndTimeInputPresent && 
  !isValidEndTimestamp))"
  type="button" class="btn btn-primary" 
  (mouseup)="validateCustomReRunParameters()" disabled>
  <i class="glyphicon glyphicon-send" ></i>
  Send action
</button>

注：该方法兼容性存在差异，优先推荐前两种方案。

内容的提问来源于stack exchange，提问作者Sayan Bhattacharjee