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

Allowing the Javascript Onbeforeunload Function on the specific button on ASP.NET Framework

本文关键字：按钮 Javascript 函数 Onbeforeunload ASP NET Framework      更新时间：2023-09-26

如何在特定按钮上设置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不起作用。如何做到这一点？有什么想法吗？我只想触发指定按钮上的功能。帮帮我。

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

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

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

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

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

因此，您需要将卸载事件绑定到window，不能像Kevin在回答中所说的那样为其分配函数。如果你只想让它为一个特定的按钮触发，下面的代码是我在活动生产中使用的东西（它还有一些检查，并在触发之前检查页面上是否有任何更改…），所以应该对你有效：

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 });

因此，后退按钮单击处理程序只需更改变量即可在卸载时触发提示。

首先，您应该理解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（）（这会在单击按钮时禁用默认操作，例如提交表单）。

我自己还没有测试过，但我想它应该有效。

相关文章：