事件方法-页面刷新关闭事件 window.onbeforeunload

项目中有个需求,需要在用户刷新、关闭页面前提示保存信息。

开始就直接想到了解决办法:

    window.onbeforeunload = function (e) {
      return false;
    }

可是,接下来我进入了漫长的思考,为什么要return false呢? return 行不行?记得有个阻止事件默认行为的方法 e.preventDefault() 可不可以用,有什么不同?

经过一番百度,搜集了一些信息:

https://www.jb51.net/article/42711.htm       

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onbeforeunload

原来,return false 实际上是以下三行代码效果的集合,被我误打误撞实现了效果,但这样做存在一定的隐患,因为他做的多了,就会错的多了,可能就影响别人了,参见第一篇博客。

  1. event.preventDefault();
  2. event.stopPropagation();
  3. 停止回调函数执行并立即返回;

然后我查看了官方文档,明确规定了:

window.onbeforeunload = function (e) {
  e = e || window.event;

  // 兼容IE8和Firefox 4之前的版本
  if (e) {
    e.returnValue = '关闭提示';
  }

  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  return '关闭提示';
};

当该事件返回的字符串(事前设置好的event.returnValue的值)不为null或者undefined时,弹出确认窗口让用户自行选择是否关闭当前页面。

因此,是因为我 return 了 false,刚好满足了规定,所以生效了。换成 return “” 试试,果然不负众望也生效了。

后来,为了让我的代码显得专业一点,改吧改吧,就是这样子了:

    window.onbeforeunload = function (e) {
      e.preventDefault();
      e.returnValue = '关闭提示';
      return '关闭提示';
    }

 

posted @ 2020-12-03 15:46  yuanxv  阅读(958)  评论(0编辑  收藏  举报