点击事件在 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 标准中的按钮定义内容模型：表述内容，但不得有交互式内容后代。根据您的代码，您想要单击按钮元素内的子元素，这在 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>