事件方法-页面刷新关闭事件 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 实际上是以下三行代码效果的集合,被我误打误撞实现了效果,但这样做存在一定的隐患,因为他做的多了,就会错的多了,可能就影响别人了,参见第一篇博客。
- event.preventDefault();
- event.stopPropagation();
- 停止回调函数执行并立即返回;
然后我查看了官方文档,明确规定了:
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 '关闭提示'; }
--------学习 交流 提升-----------