提问人：user6306245 提问时间：10/17/2023 更新时间：10/17/2023 访问量：27
防止在 JavaScript 中出现 ConfirmBox 提示后重复执行 ASP.NET 按钮单击事件
Prevent Repeated Execution of ASP.NET Button Click Event After ConfirmBox Prompt in JavaScript
问：
Hello Stack Overflow 社区，
我正在开发一个 ASP.NET 应用程序，其中我的 ASPX 页面中有一个按钮。在出现 confirmBox 后，我尝试通过 setTimeout 函数中的 JavaScript 触发其点击事件，提示用户使用“yes”或“no”。
这是我的代码片段：
<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 中出现 ConfirmBox 提示后重复执行 ASP.NET 按钮单击事件
描述：
Hello Stack Overflow 社区，
我正在开发一个 ASP.NET 应用程序，其中我的 ASPX 页面中有一个按钮。在出现 confirmBox 后，我尝试通过 setTimeout 函数中的 JavaScript 触发其点击事件，提示用户使用“yes”或“no”。
这是我的代码片段：
<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 函数中将标志 isButtonClicked 设置为 true 后，按钮单击事件仍会继续重复执行。我想防止在服务器上处理按钮单击事件后再次触发该事件。我怎样才能做到这一点？showConfirmBox()
我已经尝试检查isButtonClicked标志并在OnClientClick属性中返回false，但问题仍然存在。
有关如何防止在confirmBox提示后重复执行按钮单击事件的任何意见或建议将不胜感激。
感谢您的帮助！
答：
0赞
Albert D. Kallal
10/17/2023
#1
好吧，只是不清楚为什么会在这个问题上引入一些超时或计时器问题。
这里的目标是弹出一个确认对话框，如果用户点击“确定”，那么我们允许服务器端按钮事件代码运行（并且还希望防止额外的点击，直到服务器端代码完成）。
以上所有都相当容易。但是，计时器事件的引入表明，您可能希望关闭对话框，或者在给定时间后自动关闭对话框。
由于不清楚这里引入了什么（或为什么）计时器的概念，那么我们必须假设用户“可能”这样做，或者不希望对话框在给定的时间后自动关闭。
但是，无论上述情况如何，防止再次单击按钮的简单解决方案（至少在服务器端代码完成之前）是使用客户端代码隐藏按钮。
这种方法的优点在于，当服务器端代码完成时，不需要客户端代码来重新显示按钮（页面刷新将自动为我们执行此操作）。
因此，代码可以这样工作：
标记：
<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对话框。
评论