本文介绍一种无需增删 href 属性、仅在移动端阻止链接跳转的优雅方案：监听点击事件并结合视口宽度条件调用 event.preventDefault()，兼顾响应式切换与代码可维护性。
本文介绍一种无需增删 `href` 属性、仅在移动端阻止链接跳转的优雅方案：监听点击事件并结合视口宽度条件调用 `event.preventdefault()`，兼顾响应式切换与代码可维护性。
在构建响应式导航菜单（尤其是含悬停下拉项的桌面端菜单）时，一个常见需求是：在移动设备上点击父级菜单项时不触发页面跳转，而是展开下拉菜单；而在桌面端则保留正常的 <a href="..."></a> 导航功能。直接使用 removeAttribute('href') 和后续 setAttribute('href', ...) 虽然可行，但会带来状态管理复杂、易出错、难以同步多个链接等问题。
更推荐的做法是——不修改 DOM 属性，而是在事件层面动态控制行为。核心思路是：为菜单链接绑定 click 事件监听器，在事件处理函数中实时判断当前视口宽度（如 window.innerWidth ），若满足移动端条件，则调用 <code>event.preventDefault() 阻止默认跳转，再执行下拉逻辑；否则放行原生跳转。
以下是一个简洁可靠的实现示例：
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
<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 <= 768) {
event.preventDefault(); // ✅ 关键：阻止 href 默认行为
// 此处调用你的下拉菜单展开逻辑，例如：
// toggleDropdown(this.nextElementSibling);
console.log('移动端：已阻止跳转，准备展开下拉菜单');
}
// 大屏幕下不干预，自然执行 href 导航
});
});⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
-
避免硬编码断点：建议将
768替换为 CSS 中定义的同一断点（如通过getComputedStyle或媒体查询监听matchMedia），确保 JS 与样式逻辑一致； -
批量处理多个链接：可使用
document.querySelectorAll('.menu-link')遍历绑定，而非逐个 ID 获取； -
兼容性增强：若需支持旧版浏览器，可用
event.returnValue = false作为preventDefault()的降级补充（现代项目通常无需）； -
无障碍考量：禁用跳转后，请确保下拉菜单可通过键盘（Enter/Space）触发，并添加
aria-expanded等属性提升可访问性。
总结来说，“禁用属性”不是目的，控制交互行为才是本质。通过 preventDefault() 实现按需拦截，既避免了属性状态同步难题，又保持 HTML 结构语义完整、SEO 友好，是响应式菜单开发中的最佳实践之一。
