Django项目中锚点标签因JavaScript文件出现功能异常

问题本质 #

• 无defer的script放在<head>里时，JS执行早于DOM渲染，脚本里的DOM事件绑定找不到目标元素，表现为“JS无法加载”；但浏览器原生锚点不受JS影响，所以正常工作。
• 加defer后，JS在DOM加载完成后执行，能正常加载运行，但脚本大概率存在阻止锚点默认跳转行为的代码（比如event.preventDefault()），或修改了锚点href属性，导致锚点失效。

具体修复步骤 #

1. 排查并调整JS中的锚点拦截逻辑

   • 搜索script.js里的addEventListener('click')、preventDefault()、return false代码，尤其是针对<a>标签的全局绑定。
   • 给需要保留原生跳转的锚点加专属类名（比如native-anchor），然后在JS里添加判断：

     document.addEventListener('click', function(event) {
       const target = event.target.closest('a');
       if (target && !target.classList.contains('native-anchor')) {
         // 原有的JS处理逻辑（比如AJAX跳转）
         event.preventDefault();
       }
     });
     

   • 这样带native-anchor类的锚点可正常跳转，其他需JS处理的链接不受影响。

2. 调整script标签加载位置（替代方案）

   • 将script标签移到<body>末尾、</body>之前，无需加defer：

     <body>
       <!-- 页面所有内容 -->
       <script src="{% static '/js/script.js' %}"></script>       
       <script type="text/javascript">
         window.CSRF_TOKEN = "{{ csrf_token }}";
       </script>
     </body>
     

   • 确保DOM完全渲染后再执行JS，既保证脚本能找到目标元素，又避免defer执行时机带来的锚点干扰。

3. 检查锚点URL是否被JS篡改

   • 打开浏览器开发者工具Elements面板，查看锚点href属性是否和预期一致，是否被JS动态改为空值或无效路径。
   • 若存在篡改逻辑，添加判断条件跳过原生锚点的修改。

验证方法 #

每次修改后，通过浏览器工具确认：

• 控制台无JS报错（验证脚本正常执行）
• 点击锚点时，Network面板有跳转请求，或Events面板未触发阻止默认行为的事件

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