问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

一个关于 beforeunload 事件的问题

头像
javascriptuser
    1.6k33555
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>beforeupload event</title>
</head>
<body>
  <a href="https://www.baidu.com/">link to baidu</a>
  <script type="text/javascript">
    document.body.addEventListener('beforeunload', function(evt) {
      console.log('evt');
      return 'test';
    }, true);
  </script>
</body>
</html>

    刷新页面，离开页面都无法触发。

    浏览器版本

    clipboard.png

    用

    document.body.onbeforeunload = function(){}

    可以触发，但是为什么直接用 addEventListener 无法触发？

    令人好奇的是:

    // 函数注册在 window 上
document.body.onpageshow = function(){}
// 函数注册在 body 上
document.body.addEventListener('pageshow', function() {});
// 注册在 body 上的函数无法触发。

    请问，这是什么问题？

    javascript
    阅读 10.3k
    1 个回答
    得票最新
    头像
    Carson
      67441229
      ✓ 已被采纳

      beforeunload属于window对象，你自己想想，关闭浏览器都会触发的事件怎么可能绑定在document.body上
      用我下面代码试试

      window.addEventListener("beforeunload", function (e) {
    var confirmationMessage = '确定离开此页吗？本页不需要刷新或后退';
    (e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
    return confirmationMessage;                                // Gecko and WebKit
});

      edited1:
      追加回答
      如果你修改成

      window.onbeforeunload = function(event) {
     event.returnValue = "test..";
};

      就会正常工作了，因为这属于事件绑定而非事件注册

      Summary

      1. 通过事件注册的方式绑定beforeunload 事件的话必须注册在window对象
      2. 如果要将事件添加在dom对象上，只能通过事件绑定的方式追加

      edited2:
      如果有细节疑惑请阅读该回答下面的评论

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      被 1 篇内容引用
      推荐问题