本文介绍一种无需增删 href 属性、仅在移动端阻止链接跳转的优雅方案：监听点击事件并结合视口宽度条件调用 event.preventDefault()，兼顾响应式切换与代码可维护性。
本文介绍一种无需增删 `href` 属性、仅在移动端阻止链接跳转的优雅方案：监听点击事件并结合视口宽度条件调用 `event.preventdefault()`，兼顾响应式切换与代码可维护性。
在构建响应式导航菜单（尤其是含悬停下拉项的桌面端菜单）时，一个常见需求是：在移动设备上点击父级菜单项时不触发页面跳转，而是展开下拉菜单；而在桌面端则保留正常的 <a href="..."></a> 导航功能。直接使用 removeAttribute('href') 和后续 setAttribute('href', ...) 虽然可行，但会带来状态管理复杂、易出错、难以同步多个链接等问题。
更推荐的做法是——不修改 DOM 属性，而是在事件层面动态控制行为。核心思路是：为菜单链接绑定 click 事件监听器，在事件处理函数中实时判断当前视口宽度（如 window.innerWidth ），若满足移动端条件，则调用 <code>event.preventDefault() 阻止默认跳转，再执行下拉逻辑；否则放行原生跳转。
以下是一个简洁可靠的实现示例：
<a href="/products" class="menu-link" id="dropdownMenuLink">产品</a>
document.addEventListener('DOMContentLoaded', function() {
const menuLink = document.getElementById('dropdownMenuLink');
menuLink.addEventListener('click', function(event) {
// 响应式判断：仅在小屏幕下阻止跳转
if (window.innerWidth <p>⚠️ 注意事项：</p>
-
避免硬编码断点：建议将
768替换为 CSS 中定义的同一断点（如通过getComputedStyle或媒体查询监听matchMedia），确保 JS 与样式逻辑一致； -
批量处理多个链接：可使用
document.querySelectorAll('.menu-link')遍历绑定，而非逐个 ID 获取； -
兼容性增强：若需支持旧版浏览器，可用
event.returnValue = false作为preventDefault()的降级补充（现代项目通常无需）； -
无障碍考量：禁用跳转后，请确保下拉菜单可通过键盘（Enter/Space）触发，并添加
aria-expanded等属性提升可访问性。
总结来说，“禁用属性”不是目的，控制交互行为才是本质。通过 preventDefault() 实现按需拦截，既避免了属性状态同步难题，又保持 HTML 结构语义完整、SEO 友好，是响应式菜单开发中的最佳实践之一。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
