单击事件在 IE 中不起作用，但在其他浏览器中工作正常

Question

这是我添加了指向函数的点击事件的 html 代码，该函数将提醒一些消息。

<div class="horizontal-align" *ngFor="let taxId of selectedTaxIds">
    <button class="btn btn-rounded" disabled *ngIf="taxId.Tin !== 'All'">
         <span >Taxi ID: </span>
         <span class="text-semibold pl-4"> {{ taxId.Tin }} </span>
         <div class="close-btn" (click)="newfun()" >
              <mat-icon class="icon-display"  svgIcon="close"></mat-icon>
         </div>
     </button>
</div>

newfun(){
alert('some message')
}

这适用于 chrome，但不适用于 IE。 我尝试向标签声明一个 id，并使用运行良好的 document.getElementById 方法选择 id。 即使在检查代码时，我也可以在 IE 开发人员工具事件选项卡中看到单击事件。 请帮我解决这个问题

Answer 1

请检查HTML5 标准中的按钮定义

内容模型：短语内容，但必须没有交互式内容后代。

根据你的代码，你想点击button元素里面的子元素，在IE浏览器中是不行的。

我建议你修改你的代码如下（将点击事件添加到按钮元素，而不是 div 标签）：

<div class="horizontal-align" *ngFor="let taxId of selectedTaxIds">
    <button class="btn btn-rounded" disabled *ngIf="taxId.Tin !== 'All'" (click)="newfun()">
         <span >Taxi ID: </span>
         <span class="text-semibold pl-4"> {{ taxId.Tin }} </span>
         <div class="close-btn" >
              <mat-icon class="icon-display"  svgIcon="close"></mat-icon>
         </div>
     </button>
</div>

此外，您还可以将按钮元素更改为 div 标签，如下所示：

<div class="horizontal-align" *ngFor="let taxId of selectedTaxIds">
    <div class="btn btn-rounded" disabled *ngIf="taxId.Tin !== 'All'">
         <span >Taxi ID: </span>
         <span class="text-semibold pl-4"> {{ taxId.Tin }} </span>
         <div class="close-btn" (click)="newfun()" >
              <mat-icon class="icon-display"  svgIcon="close"></mat-icon>
         </div>
     </div>
</div>