Chrome浏览器中beforeunload API未按预期触发的问题咨询

大家好，我最近在开发一个页面功能，需要在用户执行刷新、回退、关闭标签页、跳转到其他URL这些操作时，弹出确认警告窗口。我选择了浏览器的beforeunload API来实现，但实际测试下来发现效果和预期不符，遇到了几个奇怪的问题：

• 页面刚加载完成时，直接点击浏览器的回退按钮、关闭标签页按钮，或者手动输入其他URL跳转，beforeunload的警告完全不会触发
• 只有按F5键刷新页面时，这个API能正常弹出警告；更奇怪的是，只要F5触发过一次警告之后，后续再执行回退、关标签页、跳转操作，beforeunload就都能正常工作了
• 还有一种情况：页面加载后，只要我点击过页面上的任意区域（比如那个textarea或者标题），之后再操作回退、关标签页等，警告也能正常弹出

我的开发环境是：Chrome浏览器 + VS Code + Live Server扩展，下面是能复现问题的示例代码，直接运行就能看到同样的现象：

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <h4> sample </h4>
    <form>
        <textarea placeholder=""></textarea>
    </form>
    <script type="text/javascript">
        window.addEventListener('beforeunload', (event) => {
            event.preventDefault();
            event.returnValue = '';
        });
    </script>
</body>
</html>

我现在的核心诉求是：希望页面加载完成后，不需要用户先点击页面或者先手动刷新一次，只要用户执行回退、关闭标签页、跳转URL这些操作，就能直接触发beforeunload的警告提示。有没有大佬能帮我分析下这个问题的原因，或者给出解决思路呀？

内容来源于stack exchange