jquery 防止JavaScript中确认框提示后重复执行ASP.NET按钮单击事件

wpcxdonn  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(101)

你好Stack Overflow社区
我在一个ASP.NET应用程序上工作,在我的ASPX页面上有一个按钮。我尝试在出现confirmBox后,通过setbox函数中的JavaScript触发它的click事件,提示用户"是“或”否“。
下面是我的代码片段:

<asp:Button ID="myButton" runat="server" Text="Click Me" OnClientClick="return showConfirmBox();" OnClick="myButton_Click" />
<script type="text/javascript">
    var isButtonClicked = false;
    function showConfirmBox() {
        if (!isButtonClicked) {
            setTimeout(function() {
                if (confirm('Are you sure you want to proceed?')) {
                    isButtonClicked = true; // Set the flag to true to prevent further clicks
                    document.getElementById('<%= myButton.ClientID %>').click();
                } else {
                    // Handle the case when the user clicks 'no'
                }
            }, 1000);
        }
        // Prevent the button click event from executing immediately
        return false;
    }
</script>

当然!这里是更新的Stack Overflow问题,包括所有细节:
标题:防止JavaScript中确认框提示后重复执行ASP.NET按钮单击事件
产品描述:
你好Stack Overflow社区
我在一个ASP.NET应用程序上工作,在我的ASPX页面上有一个按钮。我尝试在出现confirmBox后,通过setbox函数中的JavaScript触发它的click事件,提示用户"是“或”否“。
下面是我的代码片段:

<asp:Button ID="myButton" runat="server" Text="Click Me" OnClientClick="return showConfirmBox();" OnClick="myButton_Click" />
<script type="text/javascript">
    var isButtonClicked = false;
    function showConfirmBox() {
        if (!isButtonClicked) {
            setTimeout(function() {
                if (confirm('Are you sure you want to proceed?')) {
                    isButtonClicked = true; // Set the flag to true to prevent further clicks
                    document.getElementById('<%= myButton.ClientID %>').click();
                } else {
                    // Handle the case when the user clicks 'no'
                }
            }, 1000);
        }
        // Prevent the button click event from executing immediately
        return false;
    }
</script>

在此设置中,单击按钮时会触发showConfirmBox()函数。但是,即使在showConfirmBox函数中将标志isButtonClicked设置为true之后,按钮单击事件仍会继续重复执行。我想防止按钮单击事件在服务器上处理后再次触发。我如何才能做到这一点?
我已经尝试检查isButtonClicked标志并在OnClientClick属性中返回false,但问题仍然存在。
任何关于如何防止在confirmBox提示后重复执行按钮单击事件的建议或建议都将非常感谢。
谢谢您的帮助!

llmtgqce

llmtgqce1#

好吧,只是不清楚为什么一些超时或计时器问题被引入这个问题。
这里的目标是弹出一个确认对话框,如果用户点击“ok”,那么我们允许服务器端按钮事件代码运行(并且还希望在服务器端代码完成之前防止额外的点击)。
以上的一切都是相当容易的。但是,引入计时器事件表明您可能希望关闭对话框,或者在给定时间后自动关闭。
由于不清楚这里引入计时器的概念是什么(或为什么),因此我们必须假设“可能”用户希望或不希望对话框在给定时间后自动关闭。
然而,不管上面说的是什么,防止按钮再次被点击的简单解决方案(至少在服务器端代码完成之前)是用客户端代码隐藏按钮。
这种方法的优点在于,当服务器端代码完成时,不需要客户端代码来重新显示按钮(页面刷新将自动为我们完成此操作)。
所以,代码可以这样工作:
标示:

<asp:Button ID="myButton" runat="server" Text="Click Me"
            OnClientClick="return showConfirmBox(this);"
            OnClick="myButton_Click"
            CssClass="btn" />

        <script>

            function showConfirmBox(btn) {
                if (confirm('Are you sure you want to proceed?')) {

                    $(btn).hide()   // hide the button, prevent future clicks
                    return true
                }
                // Prevent the button click event from executing immediately
                return false;
            }
        </script>

这个测试的代码是这样的:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Protected Sub myButton_Click(sender As Object, e As EventArgs)

    ' fake 2 second delay
    System.Threading.Thread.Sleep(2000)

End Sub

结果是这样的:

因此,这里的简单方法是隐藏按钮,因此用户不能再次单击按钮,或重复多次。当然,在服务器端代码运行之后,按钮将重新出现。在你的文章中从来没有明确过,一旦服务器端代码完成,那么按钮是否会重新显示。上面的示例假设您希望在服务器端代码完成后重新显示按钮。因此,当服务器端代码运行时,用户不能再次单击按钮,因此在服务器端代码运行时不会发生多次单击。但是,代码完成后,用户可以再次单击该按钮。
此外,一定要跟进并询问对话框是否会在给定时间后自动关闭。既然您使用的是jQuery,那么我建议在这种情况下引入一个jQuery.UI对话框。

相关问题