我可以覆盖特定元素的 onbeforeunload 吗？

StackOverflow https://stackoverflow.com/questions/57791

  •  09-06-2019
  •  | 
  •  

题

我有一个页面做了很多工作，我不希望用户能够在没有收到警告的情况下离开该页面（关闭浏览器、点击后退按钮等）。我发现 onbeforeunload 事件（我认为该事件是 IE 特有的，对我来说效果很好，因为该项目使用了大量 ActiveX）效果很好。

问题是，我希望用户能够点击右上角的一个小“帮助”图标，随时弹出帮助窗口。这会导致 onbeforeunload 触发，即使主窗口永远不会去任何地方并且页面永远不会卸载。

onbeforeunload 事件运行时运行的 JavaScript 函数只是将文本放入 event.returnValue。如果我能以某种方式确定帮助图标是被单击的图标，那么在这种情况下我就不能将文本放入 event.returnValue 中。但我怎样才能让页面弄清楚呢？

有帮助吗？

解决方案

让我猜猜：帮助“图标”实际上是一个链接 javascript: 网址？将其更改为真正的按钮、真正的链接，或者至少将功能放入 onclick 事件处理程序中（以防止默认行为）。问题解决了。

<!-- clicking this link will do nothing. No onbeforeunload handler triggered. 
Nothing. 
And you could put something in before the return false bit...
...and the onunload handler would still not get called... -->
<a href="http://www.google.com/" onclick="return false;">blah1</a>
<!-- this should also do nothing, but IE will trigger the onbeforeunload 
handler -->
<a href="javascript:void(0)">blah2</a>

其他提示

编辑： 由于我缺乏理解，我下面的“解决方法”完全是矫枉过正。参考上面 Shog9 的回答。

好的，当我写这个问题时，我想出了一个目前有效的解决方法。

我放置了一个全局 JavaScript 变量作为一个布尔值来判断图标是否悬停在上面。然后，我将事件附加到图像的 onmouseover 和 onmouseout 事件，并编写将设置该值的函数。最后，我只是在处理 onbeforeunload 的函数中编写代码，该函数将在设置 event.returnValue 之前检查此值。

可能不是一个完美的解决方法，但它现在可以工作。

在互联网上你会发现很多人建议你使用类似的东西

window.onbeforeunload = null

但这在 IE6 中对我不起作用。在阅读事件对象的 MSDN 文档时，我发现了对 event.cancelBubble 属性的引用，我认为这是解决方案。但感谢Orso指出设置“event.cancelBubble=true”是没有用的，摆脱确认提示的方法是完全排除return语句，我选择使用布尔变量作为标志来决定是否返回或不返回某些东西。在下面的示例中，我以编程方式在后面的代码中添加了 javascript 代码：

Page.ClientScript.RegisterStartupScript(typeof(String), "ConfirmClose", @"  <script>        window.onbeforeunload = confirmExit;        function confirmExit()      {           if(postback == false)               return ""Please don't leave this page without clicking the 'Save Changes' or 'Discard Changes' buttons."";                                                      }       </script>");

那么帮助按钮包含以下 aspx 标记：

OnClientClick="postback=true;return true;

这会将 'postback' 变量设置为 true，该变量在 recognizeExit() 函数中获取，具有取消事件的效果。

希望你觉得这个有用。它经过测试并可在 IE6 和 FF 1.5.0.2 中运行。

我有一个方法，虽然有点笨拙，但在大多数情况下都有效。

创建一个“Holding”弹出页面，其中包含一个具有 100% 单帧的 FRAMESET，并将正常的 onUnload 和 onbeforeUnload 事件处理程序放置在 HEAD 中。

<html>
<head>
<script language="Javascript" type="text/javascript">
  window.onbeforeunload = exitCheck;
  window.onunload = onCloseDoSomething;

  function onCloseDoSomething()
  {
  alert("This is executed at unload");
  }

  function exitCheck(evt)
  {
  return "Any string here."}
  </script>
  </head>

    <frameset rows="100%">
    <FRAME name="main" src="http://www.yourDomain.com/yourActualPage.aspx">
    </frameset>
<body>
</body>
</html>

使用此方法，您可以自由地使用您想要查看的实际页面、回发并单击超链接，而无需触发外部框架 onUnload 或 onbeforeUnload 事件。

如果外部框架被刷新或实际关闭，事件将触发。

就像我说的，不是完全证明，但会在每次点击或回发时绕过事件的触发。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top