从 jquery 迁移到 zepto 时，$(window).on 无法按预期工作答案

【问题标题】：$(window).on doesn't work as expected when migrating from jquery to zepto从 jquery 迁移到 zepto 时，$(window).on 无法按预期工作
【发布时间】：2016-03-15 21:17:56
【问题描述】：

以前，我有一个 JavaScript 代码，当用户关闭浏览器时，它会弹出一个对话框并执行重定向。

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        var url     = 'http://www.yahoo.com';
        var message = 'go to yahoo?';

        $('a').on('click', function() { $(window).unbind("beforeunload"); });
        $('form').on('submit', function() { $(window).unbind("beforeunload"); });

        $(window).on("beforeunload", function() {
            $(window).unbind("beforeunload");
            setTimeout(function() {
                window.location = url;
            }, 0);

            return message;
        });
    });
</script>
</head>
<body>
hello world
</body>
</html>

我在 chrome 中进行了测试，它按预期工作。

现在，出于某种原因，我打算使用 zepto.js 而不是 jquery.js。

通过改变

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

到

<script src="zepto.min.js"></script>

我意识到代码不再有效。没有 JavaScript 错误。但是，beforeunload 的事件函数永远不会触发。

我怀疑$(window).on 在 jquery 和 zepto

之间的行为不同

请问，我怎样才能让 $(window).on("beforeunload", function() { 为 zepto 工作？

【问题讨论】：

您的代码中仍然有jQuery，所以我预计控制台中未定义jQuery 的错误，但您看不到它，因为发生了重定向。

标签： javascript jquery zepto

【解决方案1】：

我现在没有时间深入分析 zepto 和 jquery 代码。

问题在于 zepto 处理事件回调的返回值的方式。

mdn: beforeunload 表示必须这样使用：

e.returnValue = confirmationMessage;     // Gecko and Trident   
return confirmationMessage;              // Gecko and WebKit

这是由 jQuery 自动完成的，而不是由 Zepto 自动完成的。

手动设置returnValue 在 Chromium 和 Firefox 中似乎可以正常工作：

$(window).on("beforeunload", function(e) {
    e.returnValue = message;
    return message;
});

但仍然可能存在跨浏览器问题。所以要么你使用本机 addEventListener 而不是 zepto，要么你需要做一些跨浏览器测试。

【讨论】：

谢谢。我在 Edge 浏览器和 Chrome 浏览器中进行了测试。您建议的解决方案对我来说很好。
@CheokYanCheng 我正要建议打开一个问题，但我可以看到你已经这样做了 ;)