单击事件在 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 standart

中的按钮定义

Content model: Phrasing content, but there must be no interactive content descendant.

根据你的代码，你想点击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>

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

Click event is not working in IE but works fine in other browsers

html

javascript

internet-explorer

onclick

angular