Как избежать двойного нажатия на другую кнопку?

Question

Моя проблема не в двойном щелчке по той же кнопке, а по двум кнопкам.

Пользователь делает двойной щелчок по кнопке.

• Первый щелчок обнаруживается первымкнопка
• контроллер выполняет действие
• обновляется пользовательский интерфейс, в той же позиции отображается другая кнопка
• второй щелчок фиксируется второй кнопкой => user don 'Я не хочу нажимать на вторую кнопку

Как этого избежать?

Я проверил:

• Чтобы отключить все кнопки пользовательского интерфейса во времяaction
  , но если действие действительно быстрое, кнопки активируются до второго нажатия

• Чтобы не поместить 2 кнопки в одно и то же место в интерфейсе пользователя
  не всегда возможно и с отзывчивымПользовательский интерфейс не позволяет управлять всеми делами

• Чтобы добавить глобальную временную метку при клике, и проверить во время второго клика, если у нас есть 500 мс

              _click: function(args)
              {
                  // to avoid double click user need wait 500ms between each click
                  if(window.paperbutton_timestamp)
                  {
                      var diff = new Date() - window.paperbutton_timestamp;                            
                      if(diff < 500)
                      {
                          window.paperbutton_timestamp = new Date();                        
                          return;
                      }
                  }
                  window.paperbutton_timestamp = new Date();                        
  
                  if(scope.click)
                  {
                      scope.click(args);
                  }
              },
  

Хорошо, это делает работу.

Теперь моя проблема в том, что у меня много транспортировщиков.и до конца испытаний, с более чем 2000 кликов.Некоторый клик транспортира выполняется менее чем за 500 мс.

Какое решение я могу иметь?
1. Добавьте ожидание после каждого клика
(более 2000 ждать, чтобы добавить вручную)
2. Установите500 мс в глобальной переменной и переопределить это значение на 0 мс
как переопределить при каждом тесте и каждом обновлении страницы?
3. Переопределить щелчок транспортира?
Шов - лучшее решение, но я не знаю, как это сделатьсделайте это.

• У вас есть другая идея получше :)?

Answer 1

рассмотрите возможность использования * NgIf для обеих кнопок **

<button *NgIf="oneActive" (click)="oneActive=false;callfunction()">one</button>
<button *NgIf="!oneActive" (click)="oneActive=true;callfunction2()">two</button>

**

Answer 2

Было бы лучше, если бы вы написали пользовательскую функцию для щелчка транспортира:

protractor.ElementFinder.prototype.waitClick = function(wait){
  browser.sleep(wait);
  this.click();
};

describe('Tests', function() {
  element.all(by.css('#testElements')).get(0).waitClick(1000)
});

Поскольку переопределение функции щелчка по умолчанию не рекомендуется.

Answer 3

Обычно это решается с помощью старого доброго взаимодействия человека с компьютером.Попробуйте использовать стиль кнопки, которая визуально реагирует на события зависания, наклона и наведения мыши.Обычно этого достаточно, чтобы пользователь понял, что двойной щелчок не требуется.У самого Stackoverflow есть отличный пример:

Кнопка ожидания:

Кнопка наведения:

Кнопка Mousedown:

Кнопка мыши:

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

Еще одно предложение

Вы можете реализовать глобальную функцию для вызова невидимого div, охватывающего весь экран, когда это необходимо.Это помешало бы работе на экране.

<div style="position:fixed; top:0; left:0; width:100vw; height:100vh; z-index: 10000"></div>

Поместите его в файл макета, обычно app.component.html, и добавьте *ngIf, чтобы он отображался только при необходимости.Кроме того, его z-index должно быть больше, чем z-index любого другого элемента во всем приложении.