Django导航栏Login/Logout链接点击无响应问题求助

用Django开发项目时，导航栏内其余链接点击均可正常跳转，但Login链接点击后页面无刷新、无法跳转；右键选择“在新标签页打开链接”则可正常进入登录页面。登录状态下的Logout链接也存在相同问题。

相关代码 #

HTML代码 #

<header class="main-header clearfix" role="header">
  <div class="logo">
    <a href="{% url 'index' %}"></em>Class</a>
  </div>
  <a href="#menu" class="menu-link"><i class="fa fa-bars"></i></a>
  <nav id="menu" class="main-nav" role="navigation">
    <ul class="main-menu">
      <li><a href="#section1">Home</a></li>
      <li class="has-submenu"><a href="#section2">About Us</a>
        <ul class="sub-menu">
          <li><a href="#section2">Who we are?</a></li>
          <li><a href="#section3">What we do?</a></li>
          <li><a href="#section3">How it works?</a></li>
        </ul>
      </li>
      <li><a href="#section4">Courses</a></li>
      <li><a href="#section5">Video</a></li>
      <li><a href="#section6">Contact</a></li>
      {% if user.is_authenticated %}
        <li><a href="{% url 'logout' %}">Logout</a></li>
      {% else %}
        <li><a href="{% url 'login' %}">Login</a></li>
      {% endif %}
    </ul>
  </nav>
</header>

urls.py代码 #

urlpatterns = [
    path("", views.index, name="index"), 
    path("login", views.login_view, name="login"),
    path("logout", views.logout_view, name="logout"),
    path("register", views.register, name="register"),
]

这种问题的核心原因几乎都是前端JavaScript代码误阻止了a标签的默认跳转行为——右键新标签页会绕开页面内的JS事件监听，所以能正常跳转。具体排查和修复步骤如下：

1. 检查导航菜单的交互JS代码
   你的项目里肯定有处理移动端菜单（.menu-link）或菜单点击逻辑的JS（比如锚点平滑滚动、子菜单展开），大概率是这些代码没有区分锚点链接（#section1这类）和正常跳转链接（/login这类），直接给所有菜单a标签加了preventDefault()阻止默认行为。

   找到类似这样的代码：

   document.querySelectorAll('.main-menu a').forEach(link => {
     link.addEventListener('click', function(e) {
       e.preventDefault(); // 这里直接阻止了所有跳转
       // 平滑滚动到锚点的逻辑...
     });
   });
   

   修复方法：只对锚点链接阻止默认行为，其他链接放行：

   document.querySelectorAll('.main-menu a').forEach(link => {
     link.addEventListener('click', function(e) {
       const href = this.getAttribute('href');
       // 仅当链接是锚点（以#开头）时，才阻止默认跳转并执行平滑滚动
       if (href && href.startsWith('#')) {
         e.preventDefault();
         // 执行平滑滚动到对应锚点的逻辑
         const targetElement = document.querySelector(href);
         if (targetElement) {
           targetElement.scrollIntoView({ behavior: 'smooth' });
         }
       }
       // 非锚点链接（如/login、/logout）会自动执行默认跳转
     });
   });
   

2. 排查全局点击事件委托
   如果项目里用了事件委托（比如给document或nav#menu加点击事件），也要确认代码里有没有误阻止所有a标签的跳转，同样需要添加锚点判断逻辑。

3. 快速验证方案
   临时注释掉页面内所有自定义JS代码，再点击Login链接，如果能正常跳转，就可以确定是JS的问题，再针对性修改。

4. 备选方案：给跳转链接加特殊类
   可以给Login/Logout的a标签加一个专属类名，比如nav-jump-link，然后在JS里排除这类链接：

   {% if user.is_authenticated %}
     <li><a href="{% url 'logout' %}" class="nav-jump-link">Logout</a></li>
   {% else %}
     <li><a href="{% url 'login' %}" class="nav-jump-link">Login</a></li>
   {% endif %}
   

   然后在JS判断里加上排除条件：

   if (href && href.startsWith('#') && !this.classList.contains('nav-jump-link')) {
     e.preventDefault();
     // 平滑滚动逻辑
   }
   

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