如何实现左键跳转当前页、右键可在新标签打开菜单链接？

要实现左键点击执行保存跳转、右键可选择新标签页打开的效果，核心是让浏览器识别<a>标签为可跳转链接（添加href属性），同时拦截左键点击的默认行为，保留自定义的保存逻辑。

1. 修改HTML标签 #

给每个<a>添加href属性（用Django模板标签生成对应页面的URL），并在onclick中传递事件对象：

<li id="arrival_button" class="nav-item w-100 side_bar_buttons">
    <a onclick="return save_and_redirect(event, 'mainform','arrival_information')"
       href="{% url 'mainform_arrival' %}"  <!-- 替换为你的实际URL名称 -->
       class="nav-link align-middle px-0 black_color">
        <span class="ms-1  d-sm-inline">Arrival Information</span>
    </a>
</li>

<li id="food_drinks_button" class="nav-item w-100 side_bar_buttons">
    <a onclick="return save_and_redirect(event, 'mainform', 'food_and_drinks');"
       href="{% url 'mainform_food_drinks' %}"  <!-- 替换为你的实际URL名称 -->
       class="nav-link align-middle px-0 black_color">
        <span class="ms-1  d-sm-inline">Food & Drinks</span>
    </a>
</li>

<li id="guest_button" class="nav-item w-100 side_bar_buttons">
    <a onclick="return save_and_redirect(event, 'mainform', 'guest_req');"
       href="{% url 'mainform_guest_req' %}"  <!-- 替换为你的实际URL名称 -->
       class="nav-link align-middle px-0 black_color">
        <span class="ms-1  d-sm-inline">Guest Requirements</span>
    </a>
</li>

2. 调整JavaScript函数 #

修改save_and_redirect函数，拦截左键点击的默认跳转，执行保存逻辑后再手动跳转；右键点击时让浏览器默认处理（显示新标签页选项）：

function save_and_redirect(event, formName, targetPage) {
    // 拦截左键点击的默认跳转行为
    if (event.type === 'click') {
        event.preventDefault();
    }

    // 执行你的表单保存逻辑（示例，根据实际代码调整）
    const form = document.getElementById(formName);
    // 这里可以是同步/异步保存，比如AJAX提交
    saveFormData(form);

    // 保存完成后，左键点击则手动跳转
    if (event.type === 'click') {
        window.location.href = event.currentTarget.href;
    }
}

// 示例：表单保存逻辑（根据你的实际业务修改）
function saveFormData(form) {
    // 这里可以添加表单验证、AJAX提交等逻辑
    // 比如：
    const formData = new FormData(form);
    fetch('/save-form/', {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
        },
        body: formData
    }).then(response => {
        // 处理保存结果
    });
}

// 辅助函数：获取Django CSRF Token
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

原理说明 #

• 浏览器仅会对带有href属性的<a>标签显示右键菜单中的“新标签页打开”选项，因此必须添加合法的href值。
• 左键点击时，通过event.preventDefault()阻止默认跳转，先执行自定义的表单保存逻辑，完成后再手动跳转到目标页面。
• 右键点击时，不会触发click事件的默认拦截，浏览器会按照默认逻辑处理，显示新标签页相关选项。

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