如何在WebForm中使用javascript防止连打（双击）

下面是如何在WebForm中使用javascript防止连打（双击）的攻略。

1. 使用Javascript实现防止连打的原理

当用户在WebForm页面中连续点击同一个按钮时，可能会产生多次请求与处理，导致数据混乱，甚至出现系统异常等问题。使用Javascript可以有效防止这种情况的发生。

实现原理是通过给按钮添加一个onclick事件，在该事件里面添加一个disable属性，使按钮在第一次点击后变为灰色，避免用户继续点击。

2. 示例1：在WebForm中使用Javascript防止连击（双击）

以下是防止连击（双击）的Javascript代码：

function preventDoubleClick(btn) {
    if (btn.getAttribute("disabled") != null) return;
    btn.setAttribute("disabled", true);
}

这个函数的作用是判断这个按钮是否已经被点击一次，如果被点击一次了，则将 disable 的属性设为 true，如果没有被点击一次，则不做处理。

示例代码：

<form id="myform" runat="server">
    <asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="btnSubmit_Click" OnClientClick="preventDoubleClick(this);" />
</form>

在这个示例中，我们通过使用 OnClientClick 属性，当用户点击按钮时，调用 preventDoubleClick 函数。

3. 示例2：在WebForm中使用JQuery防止重载（刷新）页面

除了使用 Javascript 处理之外，还可以使用 JQuery 防止重载页面。下面是如何使用 JQuery 的示例代码：

$(document).ready(function () {
    $('#btnSubmit').click(function () {
        $(this).attr('disabled', 'disabled');
        $(this).html('<i class="icon-loading"></i> 正在提交...');
        $('#myform').submit();
    });
});

在这个示例代码中，我们使用了 JQuery 处理按钮点击事件，当用户点击按钮时，首先将按钮设为 disabled，然后给按钮添加一个 loading 图标，最后调用表单的 submit 方法提交数据。

4. 总结

以上就是在 WebForm 中使用 Javascript 防止连击（双击）的攻略了。我们可以根据自己的需求，选用不同方法实现相同的效果。这种方式不仅能够避免数据混乱，也可以提升用户体验，让用户在等待页面加载时看到一个 loading 图标给予反馈。