Событие Click не работает в IE, но отлично работает в других браузерах - PullRequest
Новая
       9

Событие Click не работает в IE, но отлично работает в других браузерах

0 голосов
/ 16 марта 2020

Вот код 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. Я попытался объявить идентификатор тегу и выбрать его с помощью метода document.getElementById, который работает нормально. Даже во время проверки кода я вижу событие click на вкладке события инструмента разработчиков IE. Пожалуйста, помогите мне в решении этой проблемы

1 Ответ

0 голосов
/ 17 марта 2020

Пожалуйста, проверьте определение кнопки в HTML5 стандарт

Модель содержимого: Фразовое содержимое, но не должно быть никакого потомка интерактивного содержимого.

Согласно вашему коду, вы хотите щелкнуть дочерние элементы внутри элемента кнопки, он не будет работать в браузере IE.

Я предлагаю вам изменить свой код, как показано ниже (добавьте событие click к элементу button вместо тега 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>

Кроме того, вы также можете изменить элемент button на тег 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>
...