请求实现导航主/子链接点击的控制台输出指定逻辑

你可以通过原生JavaScript事件委托来高效实现这个需求，代码逻辑清晰且适配动态菜单场景：

// 给header绑定点击事件（事件委托）
document.querySelector('header').addEventListener('click', function(e) {
  // 阻止默认的锚点跳转行为
  e.preventDefault();
  
  // 仅处理a标签的点击
  if (e.target.tagName === 'A') {
    const linkText = e.target.textContent.trim();
    // 查找当前a标签最近的带data-submenu属性的父级li
    const parentMenuLi = e.target.closest('li[data-submenu]');
    
    if (parentMenuLi) {
      // 子菜单链接：输出父菜单名称 + 子链接文本
      console.log(`${parentMenuLi.dataset.submenu}-${linkText}`);
    } else {
      // 主菜单链接：直接输出链接文本
      console.log(linkText);
    }
  }
});

代码逻辑说明： #

• 事件委托：仅在header层面绑定一次事件，无需给每个a标签单独绑定，性能更优且支持后续动态添加的菜单元素。
• 阻止默认行为：e.preventDefault()避免点击#时页面自动滚动到顶部。
• 层级判断：通过closest('li[data-submenu]')快速定位父级主菜单，精准区分当前点击的是主菜单还是子菜单链接。
• 文本处理：用trim()去除文本前后可能存在的空格，保证输出内容整洁。

内容的提问来源于stack exchange，提问作者Bruno Leonardo