在执行 onclick 函数之前禁用元素属性答案

【问题标题】：Disable element attribute before onclick function is executed在执行 onclick 函数之前禁用元素属性
【发布时间】：2019-04-28 22:40:23
【问题描述】：

我正在尝试使用 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);
}

但这取决于具体情况，因为在某些情况下，即使在第一次调用该函数之前，按钮也会被禁用。我想找到一个适用于任何地方的通用解决方案。谁能告诉我为什么会发生这种不匹配，以及我能做些什么来解决这个问题？提前致谢。

【问题讨论】：

你为什么想要那个？不能一键禁用，操作完成后释放吗？
我试过了。到目前为止，它是根据具体情况工作的，因为有时按钮在第一次调用该函数之前被禁用。他们似乎希望能够使其通用，以便禁用 3 次点击、4 次点击等，因此这可能是指令的 @Input 属性。
你可以禁用 onClickFunction() 上的按钮而不是使用指令吗？
我可以这样做，但问题是我必须修改 n 个函数。我更喜欢找到一个易于重用的通用解决方案，而不是在多个地方更改应用程序逻辑。希望这是有道理的。

标签： angular typescript angular-directive

【解决方案1】：

好的。我找到了解决这个问题的方法。这是我的更新代码的指令。

@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);
  }
}

我不确定为什么会这样，希望你们中的一些人有更好的理解。

【讨论】：