本文讲解如何在为 DOM 元素动态添加/切换 CSS 类的同时，可靠阻止其默认点击行为（如 标签跳转），解决 preventDefault() 失效的常见问题。核心在于正确绑定事件、精准选择目标元素，并用 return false 统一处理阻止默认行为与停止事件冒泡。
本文讲解如何在为 dom 元素动态添加/切换 css 类的同时，可靠阻止其默认点击行为（如 `` 标签跳转），解决 `preventdefault()` 失效的常见问题。核心在于正确绑定事件、精准选择目标元素，并用 `return false` 统一处理阻止默认行为与停止事件冒泡。
在移动端导航菜单中，常使用 标签包裹一个用于展开/收起子菜单的图标
你最初尝试在 .royalonogy-mobile-menu-link（即父 ）上监听点击，并通过 e.target.className 判断是否点击了图标，再调用 e.preventDefault()。这种方式存在两个关键问题：
- 事件委托目标不精准：.royalonogy-mobile-menu-link 是 元素，而你真正想拦截的是其内部 的点击行为；当点击 时，事件会冒泡到 ，但此时 e.target 是 ，其 className 并非 'royalonogy-mobile-menu-dropdown'（可能含空格或多个类），导致 preventDefault() 未执行；
- 逻辑耦合且易失效：将 preventDefault() 和 DOM 操作（toggle()、addClass/removeClass）分离在不同事件处理器中，一旦类名变更或 DOM 结构微调，判断逻辑极易断裂。
✅ 正确做法是：直接在图标 上委托事件，并在同一个处理函数中完成样式切换、DOM 操作与行为阻止。推荐写法如下：
$('body').on('click', '.royalonogy-mobile-menu-dropdown', function(e) {
const $icon = $(this);
// 切换图标激活类
$icon.toggleClass('royalonogy-mobile-menu-dropdown-active');
// 切换相邻的子菜单 ul
$icon.parent().next('ul.royalonogy-mobile-podkategorie-menu').toggle();
// 阻止默认行为（跳转）并停止事件冒泡
return false;
});
? 为什么 return false 更可靠？
在 jQuery 事件处理函数中，return false 等价于同时执行 e.preventDefault() + e.stopPropagation()。相比手动调用 e.preventDefault()，它避免了因条件判断失败导致的遗漏，也彻底阻断了事件向父 的冒泡，从而从根源上防止跳转。
⚠️ 注意事项：
- 确保事件委托选择器 .royalonogy-mobile-menu-dropdown 精准匹配图标 ，而非其父 ；
- 移除旧的、在 .royalonogy-mobile-menu-link 上的点击监听器，避免逻辑冲突；
- 若需兼容原生 JS，可改用 e.preventDefault(); e.stopImmediatePropagation();，但 jQuery 中 return false 更简洁安全；
- toggle() 方法依赖 jQuery 版本 ≥ 1.0，若需兼容极老版本，请显式使用 show() / hide() 或 slideToggle() 提升体验。
通过这一重构，无论图标是否已拥有 royalonogy-mobile-menu-dropdown-active 类，每次点击都稳定触发样式切换与菜单控制，且绝不跳转——真正实现“视觉反馈”与“行为控制”的解耦与可靠协同。
