带跨度的禁用按钮仍会触发点击功能！ 角

Question

我有一个按钮，它被禁用了。 在这个按钮里面，还有一个 span 元素。 在 Chrome 中，当按钮被禁用并被点击或跨度被点击时，它会按预期工作。

但是在 IE 中，即使按钮被禁用，它仍然会触发点击功能！ 对于我的应用程序来说，不触发点击功能至关重要。

Internet Explorer 版本：11.657.18362.0

HTML代码

  <button
    [ngClass]="['btn-x', 'btn-y--']"
    (click)="clicked($event)"
    [disabled]="disabled"
  >
    <span [style.pointer-events]="disabled ? 'none' : ''"></span>
    <span *ngIf="showCircle">
      <img src="/*****/icons/******.gif" alt="*****" class="btn-spinner" />
    </span>
  </button>

角函数

  clicked($event: MouseEvent) {
    if ($event.target !== $event.currentTarget && this.disabled) {
      $event.preventDefault();
    } else {
      this.onClick.emit($event);
    }
  }

另一个问题是，由于某种原因，我什至无法使用 IE 进行调试，因此我的机会非常有限。 （我为此创建了一个新问题）。

你知道如何防止这些函数被调用的替代方法，它也适用于 IE 吗？

任何帮助表示赞赏，提前致谢！

Answer 1

   <button
    [ngClass]="['btn-x', 'btn-y--']"
    (click)="clicked($event, 'DISABLED')"
    [disabled]="disabled"
  >
    <span [style.pointer-events]="disabled ? 'none' : ''"></span>
    <span *ngIf="showCircle">
      <img src="/*****/icons/******.gif" alt="*****" class="btn-spinner" />
    </span>
  </button>

    clicked($event: MouseEvent, prop) {
    if(prop === 'DISABLED')
       return;
    if ($event.target !== $event.currentTarget && this.disabled) {
      $event.preventDefault();
    } else {
      this.onClick.emit($event);
    }
  }

它可以帮助任何浏览器，但你也可以实现变量来告诉你这是否被禁用！