Отключить атрибут элемента перед выполнением функции onclick - PullRequest
Новая
       8

Отключить атрибут элемента перед выполнением функции onclick

0 голосов
/ 27 ноября 2018

Я пытаюсь отключить двойное нажатие кнопок с помощью директив в Angular.

Вот мой соответствующий код шаблона: 

<button (click)="onClickFunction()" appPreventDoubleClick>Add</button>

Вот моя директива: 

@Directive({
  selector: "[appPreventDoubleClick]"
})
export class PreventDoubleClickDirective {
  count: number = 0;
  constructor() {}

  @HostListener("click", ["$event"])
  click(event) {
    ++this.count;
    if (this.count > 1) {
      console.log("disabling");
      event.srcElement.setAttribute("disabled",true);
      setTimeout(() => {
        event.srcElement.removeAttribute("disabled");
        this.count = 0;
      }, 1000);
    }
  }
}

То, что я в основном пытаюсь сделать, это отключить кнопку, если она нажата дважды, и сбросить ее через 1 секунду, чтобы onClickFunction() не вызывался, если она отключена.Но происходит то, что хотя функция @HostListener click() вызывается до onClickFunction(), onClickFunction() все еще выполняется.Как я могу решить эту проблему?Любая помощь приветствуется.

Редактировать : В комментарии я хотел упомянуть, что я попробовал это сначала: 

@HostListener("click", ["$event"])
click(event) {
  event.srcElement.setAttribute("disabled", true);
  setTimeout(() => {
    event.srcElement.removeAttribute("disabled");
  }, 1000);
}

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

1 Ответ

0 голосов
/ 27 ноября 2018

Хорошо.Я нашел решение этой проблемы.Вот моя директива с обновленным кодом. 

@Directive({
  selector: "[appPreventDoubleClick]"
})
export class PreventDoubleClickDirective {
  constructor() {}

  @HostListener("click", ["$event"])
  click(event) {
    setTimeout(() => {
      event.srcElement.setAttribute("disabled", true);
    }, 0);
    setTimeout(() => {
      event.srcElement.removeAttribute("disabled");
    }, 1000);
  }
}

Я не совсем уверен, почему это работает, надеюсь, некоторые из вас лучше понимают.

...