Click 事件在 IE 中不起作用，但在其他浏览器中可以正常工作答案

【问题标题】：Click event is not working in IE but works fine in other browsersClick 事件在 IE 中不起作用，但在其他浏览器中可以正常工作
【发布时间】：2020-03-16 16:25:40
【问题描述】：

这是我添加指向函数的点击事件的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 开发人员工具事件选项卡中看到单击事件。请帮我解决这个问题

【问题讨论】：

标签： javascript html angular internet-explorer onclick

【解决方案1】：

请查看HTML5 standart中的按钮定义

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

根据您的代码，您要单击按钮元素内的子元素，它在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>

【讨论】：