如何实现仅捕获浏览器窗口关闭事件？Chrome 65下代码测试

要实现仅在用户关闭浏览器窗口时触发提示，而排除点击链接、提交表单这类正常页面内操作的情况，你可以通过标记用户操作类型的方式来区分处理。你提供的代码思路是对的，我来帮你拆解细节并补充一些实用注意事项：

核心实现代码 #

var inFormOrLink; 
$('a').on('click', function () { inFormOrLink = true; }); 
$('form').on('submit', function () { inFormOrLink = true; }); 
$(window).on('beforeunload', function (eventObject) { 
    var returnValue = undefined; 
    if (!inFormOrLink) { 
        returnValue = "Do you really want to close?"; 
    } 
    if (returnValue != undefined) { 
        eventObject.returnValue = returnValue; 
        return returnValue; 
    } 
});

代码原理拆解 #

• 首先声明变量inFormOrLink，用来标记用户是否正在执行页面内的跳转/提交操作；
• 给所有<a>标签绑定点击事件：当用户点击链接时，将标记设为true，说明这是正常的页面跳转，不需要触发关闭提示；
• 给所有<form>标签绑定提交事件：当用户提交表单时，同样把标记设为true；
• 监听window的beforeunload事件：这个事件会在页面卸载（包括关闭窗口、刷新、跳转）时触发。回调里判断如果标记为false，说明用户不是在进行链接点击或表单提交，大概率是要关闭窗口，此时设置提示文本。同时兼容eventObject.returnValue和返回值两种写法，确保在不同浏览器里都能生效。

重要注意事项 #

• 浏览器自定义文本限制：现在多数现代浏览器（比如Chrome 65之后的版本、Firefox等）会忽略你设置的自定义提示文本，只显示浏览器自带的默认提示。这是浏览器为了安全和用户体验做的限制，所以不要依赖自定义文本的显示；
• DOM加载时机：要确保这段代码在DOM元素加载完成后执行，最好包裹在$(document).ready()里，否则可能无法找到<a>或<form>元素；
• 动态元素处理：如果页面里有动态生成的链接或表单，直接用$('a').on()绑定事件是无效的，需要改用事件委托：

  $(document).on('click', 'a', function () { inFormOrLink = true; });
  $(document).on('submit', 'form', function () { inFormOrLink = true; });
  

• 重置标记：如果需要处理用户取消操作后的情况（比如点击链接后又取消跳转），可以在合适的时机把inFormOrLink重置为false，避免后续误判。

内容的提问来源于stack exchange，提问作者ANEES