Почему директива dblclick angular не работает в IE? - PullRequest
Новая
       16

Почему директива dblclick angular не работает в IE?

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

Меня удивляет, почему директива dblclick angular не работает ни в IE, ни в браузере Edge. Это часть моего кода, на самом деле c:

HTML

 <select [(ngModel)]="selected"multiple>
            <option *ngFor="let item of filteredData" value="{{ item.id}}"
                (dblclick)="openItem(item)">
                {{item.name}}
            </option>
        </select>

TS 

 openItem(item: any) {
    alert('I need this function will be executed when the user will do double click in option')
 }

В Chrome и Firefox он отлично работает.

Ответы [ 2 ]

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

Я протестировал ваш пример кода в IE 11, MS Edge (Chromium), Google Chrome и получил похожие результаты во всех браузерах. То есть ваше событие двойного щелчка не было выполнено.

Я не уверен, как оно сработало на Chrome и Firefox на вашей стороне. Если возможно, пожалуйста, опишите больше об этом.

Причина, по которой я думаю, что когда вы впервые нажимаете на опцию выпадающего списка, он сразу же закрывается, и выбранное значение отображается в Select.

Здесь я не знаю о вашем требовании двойного щелчка на опции. Если возможно, пожалуйста, предоставьте больше информации об этом.

Я заметил в своем тесте, что если мы добавим событие двойного щелчка в Select, то оно будет работать для всех браузеров, включая IE.

. Вот результат теста с браузером IE 11:

enter image description here

Таким образом, вы можете проверить, и если это соответствует вашим целям, вы можете использовать его как Решение этой проблемы.

Еще одна вещь, которую я заметил, что если мы используем Material Select, то, если вы добавили событие в код опции и дважды щелкнули по Select, это работает для всех браузеров.

Пример кода: 

<h4>select Food</h4>
<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" (dblclick)="openItem(item)" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Дайте мне знать, если я что-то неправильно пойму, я постараюсь исправить себя.

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

Согласно документам

dblclick срабатывает после двух событий click (и, соответственно, после двух пар событий mousedown и mouseup).

Поэтому вместо того, чтобы полагаться на событие dblclick, я попытался эмулировать двойной щелчок, используя mouseup. Однако из-за какой-то проблемы, о которой я не знаю, она тоже не запускается в Edge.

Template 

<option *ngFor="let sta of status" [ngValue]="sta" 
  (mouseup)="openItem(sta)" 
  (contextmenu)="openContext($event, sta)">
{{sta}}
</option>

Компонент 

private clicks = 0;

openItem(item: any) {
  this.clicks++;
  if (this.clicks === 2) {
    this.clicks = 0;
    console.log('Double click: ' + item);
  } else {
    // double click frequency must be less than 300 ms
    setTimeout(() => { this.clicks = 0 }, 300);
  }
}

openContext(event: any, item: any) {
  event.preventDefault();
  console.log('Context menu: ' + item);
}

Так что я бы сказал вместо того, чтобы полагаться на двойной щелчок, альтернативой может быть использование события contextmenu, которое работает должным образом в разных браузерах.

Рабочий пример: Stackblitz

...