Javascript确认对话框 - 防止事件处理程序触发？答案

【问题标题】：Javascript confirm dialog - prevent event handler firing?Javascript确认对话框 - 防止事件处理程序触发？
【发布时间】：2011-10-07 14:47:50
【问题描述】：

我有一个包含多个字段和几个复选框的表单。当用户单击保存时，如果未选中某个复选框，则会提示他们使用“确认”对话框询问他们是否仍要保存表单。如果他们单击确定，按钮应该正常触发它的事件处理程序，但如果他们单击取消，则不会发生任何事情。

function checkVerification(checkBox)
{
    if (!document.getElementById(checkBox).checked)
    {
        confirm('Worksheet has not been verified. Save anyway?');            
    }
}

目前，无论用户选择如何，保存按钮的事件处理程序都会触发。任何建议将不胜感激。

【问题讨论】：

标签： c# javascript asp.net

【解决方案1】：

如果用户拒绝保存，则返回 false，如下所示：

return confirm('Worksheet has not been verified. Save anyway?');

如果用户单击“是”，confirm() 将返回 true，如果用户单击“否”，则返回 false。返回false 指示浏览器停止正常处理事件。

【讨论】：

【解决方案2】：

var ok = confirm('Worksheet has not been verified. Save anyway?');
if (ok) {
    // trigger
}

【讨论】：

【解决方案3】：

你需要将确认对话框的返回值绑定到按钮的OnClientClick，像这样：

<asp:Button ID="Button1" runat="server" OnClientClick="return confirm('Are you sure?');" ... />

在这种情况下，如果用户单击是，页面将执行回发。如果用户点击No，回发将被中止。

查看您的评论后，试试这个：

btnSave.OnClientClick = String.Format("return checkVerify('{0}');", cbVerified.ClientID);

在你的 JavaScript 函数中：

function checkVerify(checkBox)
{ 
    bool continue = true;
    if(!document.getElementById(checkBox).checked) {
        continue = confirm('Worksheet not verified. Would you like to save?');
    } 
    return continue;
}

【讨论】：

嗨，詹姆斯，感谢您的回复。我目前正在将复选框的 ClientID 传递给 Javascript 函数...
btnSave.Attributes.Add("OnClientClick", "return checkVerify('" + cbVerified.ClientID + "')");
Javascript函数编写如下：
function checkVerify(checkBox) { if(!document.getElementById(checkBox).checked === true) { if(confirm('工作表未验证。要保存吗？' )) { 返回真； } 否则 { 返回假； } } }
点击保存..
并且页面回发而不调用 btnSave 的事件处理程序。为之前评论的格式道歉。编辑：此外，不显示任何对话框。
OnClientClick 是 Button 的属性，所以不需要添加为属性。只需使用btnSave.OnClientClick = ...

【解决方案4】：

假设验证绑定到 onsubmit 事件，您可以从处理程序返回 false 并且不会提交表单。

此外，如果您使用的是 jQuery，则 event.preventDefault() 方法也会这样做。

【讨论】：

【解决方案5】：

如果没有看到更多代码，很难准确判断，但一个问题可能是您的 if 语句。为了确保正确的类型检查，请使用 === 而不是假设您的值是布尔值。

if(document.getElementById(checkBox).checked === false) { ... }

您还可以在页面上拥有多个具有相同 id 值的复选框...如果一个被选中而一个不是 document.getElementById 可能会得到一个未选中的复选框。

希望对您有所帮助。

【讨论】：