事件委托通过父元素统一处理子元素事件，适用于菜单跳转；监听容器并用closest('a')安全获取链接，从data-href读取地址，支持禁用状态和stoppropagation防重复跳转。
事件委托是通过监听父元素来统一处理子元素的事件，菜单项点击跳转完全适合用它——避免为每个菜单项单独绑定事件，提升性能，也方便动态增删菜单项。
监听容器，判断目标元素
给菜单的父容器（比如 <ul class="menu"></ul>）绑定 click 事件，点击时检查 event.target 是否为菜单项（如 <a></a> 或 <li>），再提取跳转信息。
- 推荐用
event.target.closest('a')安全获取最近的链接元素，兼容嵌套内容（如带图标或文字包裹的<a></a>） - 避免直接用
event.target.tagName === 'A'，因为点击图标或内联元素时 target 可能不是<a></a>
从元素属性读取跳转地址
跳转地址不建议硬编码在 JS 里，而是从 HTML 属性中提取，保持结构与逻辑分离。
- 用
href属性最直接：const url = link.href; - 若需自定义行为（如 SPA 路由跳转），可用
data-href或data-to：const url = link.dataset.href; - 加
event.preventDefault()阻止默认跳转，后续再用window.location.href = url或history.pushState()
支持禁用状态和阻止冒泡
有些菜单项可能临时禁用，或嵌套了其他可点击组件（如开关、按钮），需合理控制事件流。
- 检查
link.hasAttribute('disabled')或link.classList.contains('disabled')，跳过处理 - 如果菜单项里有子按钮（如“删除”图标），点击时不触发跳转，可在子元素上加
event.stopPropagation() - 确保父容器没有意外的
onclick或重复监听，避免跳转两次
示例代码片段
一个轻量实用的写法：
document.querySelector('.menu').addEventListener('click', (e) => {
const link = e.target.closest('a[data-href]');
if (!link || link.hasAttribute('disabled')) return;
e.preventDefault();
const url = link.dataset.href;
if (url) window.location.href = url;
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
