在 ASP.NET Framework 上的特定按钮上允许 Javascript Onbeforeunload 函数答案

【问题标题】：Allowing the Javascript Onbeforeunload Function on the specific button on ASP.NET Framework在 ASP.NET Framework 上的特定按钮上允许 Javascript Onbeforeunload 函数
【发布时间】：2014-12-02 16:24:30
【问题描述】：

如何在特定按钮上设置 Onbeforeunload 功能？例如，我有 3 个按钮。

<div>
   <asp:Button ID="btnBack" runat="server" Text="Back" CssClass="po-font" Height="30px"/>
   <asp:Button ID="btnSumbit" runat="server" Text="Submit" CssClass="po-font" Height="30px"/>
   <asp:Button ID="btnSaveToDraft" runat="server" Text="Save To Draft" CssClass="po-font" Height="30px"/>
</div>

在 javascript 上，我做了类似的事情：

<script type="text/javascript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
   return "Are you sure you want to leave this page? Any unsaved progress will be  lost";
  }
</script>

该功能将正常工作，但我想在特定按钮中指定该功能，可能在“返回”按钮上。我做了类似的事情。

<script type="text/javascript">
  function confirmExit()
  {
    return "Are you sure you want to leave this page? Any unsaved progress will be  lost";
  }

$('#btnBack').live('click', function () {
    window.onbeforeunload = confirmExit;
});

</script>

但 ID 不起作用。这个怎么做？有任何想法吗？我只想触发指定按钮上的功能。帮帮我。

【问题讨论】：

怎么不工作？
我只想在“返回”按钮上应用该功能。不在两个按钮上（btnSumbit，btnSaveToDraft）。我使用了上面的语法，但它不起作用。还是应该使用更好的功能？

标签： javascript c# jquery c#-4.0

【解决方案1】：

使用$('<%=btnBack.ClientID%>').click(function(){...});，因为 asp.net 为它自己的客户端添加了控件 id 的前缀，而 html 呈现的 id 可能看起来像 ct100$btnBack。

【讨论】：

【解决方案2】：

首先，ID 不太可能是正确的，因为 ASP.NET 会在该 ID 前面加上该对象的容器。要么给btnBack 一个类并使用它，要么：

$("[id$='btnBack']").on("click",...)

当我回到我的电脑前时，我将使用经过实战测试的版本进行编辑

* 编辑以添加经过实战测试的代码 *

所以你需要将卸载事件绑定到window，你不能像凯文在他的回答中所说的那样为其分配函数。如果您只希望它为特定按钮触发，下面的代码是我在活动生产中使用的代码（它还有一些检查，并在触发之前检查页面上是否有任何更改等......），所以应该为你工作：

if (self == top) { // Check we're not in an iFrame or colorbox
   $(window).bind("beforeunload", function (event) { // bind the window unload event
        if (backLinkClicked) { // Check if the back link has been clicked, if so prompt
            return "Are you sure you want to leave this page? Any unsaved progress will be  lost";
        };
    });
}

然后你的click 处理程序：

var backLinkClicked = false;
$("[id$='btnBack']").click(function() { backLinkClicked = true });

因此，您返回按钮单击处理程序只需更改变量以在卸载时触发提示。

【讨论】：

【解决方案3】：

首先，您应该了解 onbeforeunload 是一个事件，并且通过放置：

window.onbeforeunload = confirmExit;

您正在将一个事件处理程序附加到窗口，这将是全局的。

如果我是正确的，当用户尝试通过单击按钮导航离开时，您想要的是弹出一个确认对话框。我建议你试试这个：

$('#<%=btnBack.ClientID%>').on('click', function (e) {
    // check if user clicked cancel
    if (!confirm("Are you sure [...]") {
        e.stopImmediatePropagation();
        e.preventDefault();
        return false;
    }
});

这样，当用户单击按钮时，将出现一个确认对话框 (confirm())。如果用户点击cancel，代码将调用stopImmediatePropagation()（这将阻止其他JS事件处理程序运行）和preventDefault()（禁用单击按钮时的默认操作，例如提交表单）。

我自己没有对此进行测试，但我想它应该可以工作。

【讨论】：