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将覆盖整个页面，并且将鼠标悬停在其上会将光标设置为加载样式。因为它覆盖了页面，所以无法点击任何内容。您还可以使用{{1}}或其他定位，宽度，高度等来调整此选项以仅填充页面的一部分。

Answer 2

如果您使用的是更新面板，这是最好的方法。并且用户将知道该过程正在进行，甚至他也无法点击按钮。您只需选择代码

下面的处理图像

 <asp:UpdateProgress ID="udpProgress" AssociatedUpdatePanelID="update" runat="server">
    <ProgressTemplate>
        <div style="width: 2000px; height: 1000px; background-color: Gray;position: absolute; opacity:50;filter:Alpha(Opacity=50);z-index:10000"> 

        </div>
         <img style="vertical-align: middle; margin-left: 47%; margin-top: 10%; position: absolute;z-index:10001"
                id="imgProgressImage" alt="Progressing" src="Images/LoadingProgress.gif" />
    </ProgressTemplate>
</asp:UpdateProgress>


<asp:UpdatePanel ID="update" runat="server">
 </ContentTemplate >
 <ContentTemplate >
</asp:UpdatePanel>

Answer 3

您的评论显示您在JS中使用变量来存储当前页码，并在单击“下一个”或“上一个”按钮时将其增加/减少1。

这意味着在ajax调用完成之前，此变量会被更改，这是导致问题的原因。即使你通过'在请求完成之前只点击一次'路线，另一个潜在的问题就在那里：当ajax调用失败时，你的变量也会改变 - 而这个问题不会因为简单地在ajax上放一个透明的加载掩码而消失请求正在进行中。

解决方案是将更改此变量的逻辑移动到ajax回调中，最好还在ajax响应中返回您正在使用的页码。

Answer 4

我通常禁用并启用按钮或有一个bool。但是，如果您愿意，可以添加和删除事件侦听器。

直接从MDN使用此代码。

这将在单击按钮后删除事件侦听器。

var div = document.getElementById("div");

var listener = function (event) {
    div.removeEventListener("click", listener, false);
};

div.addEventListener("click", listener, false);

避免按钮上的多个单击事件

4 个答案: