a标签中mailto与onclick结合触发beforeunload弹窗的解决方案求助

我查了一大堆同类问题，代码和别人的有效案例完全一样，但问题就是解决不了。我用<a>标签的href属性做邮件发送功能，功能本身没问题，但每次点击都会弹出确认框，问用户是留在页面还是离开。

为了消掉这个弹窗，我设了个标志位mailtoLinkClicked，想让用户点击链接触发onbeforeunload事件时，把这个标志位设为true，这样就不弹确认框。结果试了各种办法，要么邮件发不出去，要么弹窗还是出来，已经卡了4天了。

原始代码 #

MyWindow.cshtml #

// 该视图通过window.open()在新窗口打开

// some code

@CommonModals.ShowEmailModal()

// some code

CommonModals.cshtml #

// 该视图包含标签形式的邮件链接，ShowEmailModal()方法在MyWindow.cshtml中调用

@helper ShowEmailModal()
{
   <p>Contact <a tabindex=0 href='@EmailID1' onclick='mailtoLinkClicked = true;'>EmailID1</a></p>
   <p>Contact <a tabindex=0 href='@EmailID2' onclick='mailtoLinkClicked = true;'>EmailID2</a></p>
}

原始JavaScript代码 #

@section scripts
{
    <script type=text/javascript" charset="utf-8">
        mailtoLinkClicked = true;
    
        $(window).on("beforeunload", function () {
            mailtoLinkClicked = false;
            return; //returning without asking the user if they want to leave
        }

        if (some condition) {
            return "Unsaved changes! You want to leave?";
        }
     </script>
}

问题分析与修正方案 #

你的代码存在几个关键问题：

• 语法错误：beforeunload事件绑定的函数缺少闭合的)和;，导致代码无法正常执行
• 标志位逻辑颠倒：初始值设为true，点击链接时又设为true，无法区分是否是点击mailto链接的情况
• 条件判断位置错误：未保存更改的判断逻辑放在了事件处理函数外部，不会在beforeunload触发时执行

修正后的代码如下：

修正后的JavaScript代码 #

@section scripts
{
    <script type="text/javascript" charset="utf-8">
        // 初始标志位设为false，仅点击mailto链接时改为true
        let mailtoLinkClicked = false;
    
        $(window).on("beforeunload", function (e) {
            // 如果是点击mailto链接，不触发确认弹窗
            if (mailtoLinkClicked) {
                mailtoLinkClicked = false; // 重置标志位，避免影响后续操作
                return;
            }
            
            // 检查是否有未保存的更改，有则触发弹窗提示
            if (/* 替换为你的未保存更改判断条件 */) {
                e.preventDefault();
                return "有未保存的更改！确定要离开吗？";
            }
        });
    </script>
}

额外优化：避免onclick事件的潜在问题 #

可以给<a>标签添加target="_blank"，确保邮件客户端在新窗口打开，同时减少页面跳转触发beforeunload的概率：

@helper ShowEmailModal()
{
   <p>Contact <a tabindex="0" href='@EmailID1' onclick='mailtoLinkClicked = true;' target="_blank">EmailID1</a></p>
   <p>Contact <a tabindex="0" href='@EmailID2' onclick='mailtoLinkClicked = true;' target="_blank">EmailID2</a></p>
}

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