javascript - 避免按钮上的多次点击事件

Question

我的网页上有下一个和上一个按钮。他们在可用的中间部分上获取下一页和上一页。新页面的响应来自服务器。

如果用户多次单击按钮，例如5 次后，将跳过 4 页并加载第 5 页。我想要做的是在第一个未完成时禁用所有点击事件。

我知道我可以在第一次单击发生时禁用按钮。但我不喜欢编写逻辑来启用/禁用按钮。 JavaScript 中是否提供了任何可以更智能地工作的代码语句。

Answer 1

我有一个我很喜欢的技巧=D

我使用这个CSS:

.page-load-mask {
  position: fixed;
  z-index: 99999;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: progress;
}

在页面的任意位置使用此标记:

加载任何内容时，显示该 div 并在加载完成后再次隐藏它。

Live demo here (click).

为了进一步解释，发生的情况是 .page-load-mask 在可见时会覆盖整个页面，并将鼠标悬停在其上将光标设置为正在加载。因为它覆盖了整个页面，所以无法点击任何内容。您还可以使用 position:absolute 或其他定位、宽度、高度等对其进行调整，以仅填充页面的一部分。