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

Question

以前，我有一个 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？

Answer 1

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

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

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，要么你需要做一些跨浏览器测试。

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

$(window).on doesn't work as expected when migrating from jquery to zepto

javascript

jquery

zepto