链接内嵌套span导致JS事件委托失效的技术求助

问题场景 #

我们的网站顶部导航栏通过<span>标签实现桌面端与平板端的差异化文本显示，每个导航项都配置了完整URL以兼容JS禁用的场景，同时通过JS事件委托拦截点击事件来弹出菜单面板。但当<a href>链接内嵌套<span>标签时，JS拦截功能失效，用户点击后会直接跳转到默认URL。

示例HTML代码 #

<a href="example.com/link1.htm" id="nvbtn1" class="tba">
  <span class="sf">Full Desktop Title</span>
  <span class="st">Lil Title</span>
</a>
<a href="example.com/link2.htm" id="nvbtn2" class="tba">Medium Title</a>

注：第一个嵌套<span>的链接无法被拦截，第二个无嵌套的链接可正常弹出菜单。

原JS事件委托代码 #

// overall event delegation
$('mstrwrap').addEventListener('click', function(e) {
  // set eventlisteners for all A HREF links
  if (e.target.nodeName === 'A') {
    // check if is navbar link
    if ((e.target.id) && (e.target.id.includes('nvbtn'))) {
      // disable click through and determine matching nav panel
      e.preventDefault();
      const nvpnl = e.target.id;
      const lk = 'nav' + nvpnl.match(/\d+/g);

      // open nav panel
      openNav(lk, nvpnl);
    }
    // end if navbar link
    // 140 more lines of event delegation
  }
// end set eventListeners
});
// end masterwrap event delegation

核心原因 #

点击嵌套在<a>标签内的<span>时，事件的target指向的是<span>元素而非<a>元素，导致原代码中e.target.nodeName === 'A'的判断不成立，后续的拦截逻辑无法触发。

解决方案 #

修改事件委托逻辑，通过Element.closest()方法从点击目标向上遍历DOM树，找到最近的<a>元素，再判断该元素是否为导航栏按钮。这种方式不管点击的是<a>本身还是其内部的子元素，都能正确定位到目标链接。

修改后的JS代码 #

// overall event delegation
$('mstrwrap').addEventListener('click', function(e) {
  // 找到点击目标最近的<a>元素
  const targetLink = e.target.closest('a');
  if (targetLink) {
    // check if is navbar link
    if ((targetLink.id) && (targetLink.id.includes('nvbtn'))) {
      // disable click through and determine matching nav panel
      e.preventDefault();
      const nvpnl = targetLink.id;
      const lk = 'nav' + nvpnl.match(/\d+/g);

      // open nav panel
      openNav(lk, nvpnl);
    }
    // end if navbar link
    // 140 more lines of event delegation
  }
// end set eventListeners
});
// end masterwrap event delegation

代码说明 #

1. 用e.target.closest('a')替代原有的e.target判断，确保能捕获到包含点击目标的父级<a>元素
2. 后续所有对链接元素的操作都改为使用targetLink变量，而非e.target
3. 保留原有的导航栏按钮判断逻辑，确保只有指定的导航链接才会触发拦截

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