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

【问题标题】：Disabled button with span still fires click function! Angular带跨度的禁用按钮仍会触发点击功能！角
【发布时间】：2020-06-29 12:05:49
【问题描述】：

我有一个禁用的按钮。在这个按钮内部，还有一个 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 吗？

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

【问题讨论】：

我用你的代码测试它会抛出错误：“disabled”和“onClick”不存在。我编辑它并制作a demo，该按钮将在 IE 中被禁用，无法单击。最好能提供更多相关代码reproduce the issue。您可以使用 StackBlitz 等在线代码编辑器提供最小示例。这样我们就可以在IE中使用F12开发工具进行测试，看看控制台是否有错误。

标签： javascript html css angular internet-explorer

【解决方案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);
    }
  }

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

【讨论】：

问题是，只有当参数 disabled 为 true 时，该按钮才会被禁用。我无法将固定字符串“禁用”传递给它。
好的，所以在函数调用clicked($event, disabledParameter) 中传递参数，如果是这样，请检查 ts 文件
if ($event.target !== $event.currentTarget && this.disabled) { $event.preventDefault(); } 其他 { this.onClick.emit($event); } --> 在我的 if 语句中已经检查了 disabled 变量，仍然尝试通过它，结果相同。