如何稳定获取 HTML 元素的 data-id 属性并实现导航联动

✅ 正确做法：委托事件到 .controls 容器，并精准定位触发源

推荐采用事件委托（Event Delegation），将监听器统一绑定在 .controls 上，再通过 e.target.closest('.control') 安全获取最近的控制项元素：

立即学习“前端免费学习笔记（深入）”；

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

下载

document.addEventListener('DOMContentLoaded', () => {
  const controls = document.querySelector('.controls');
  const sections = document.querySelectorAll('.section');

  // 绑定点击事件到 controls 容器（委托）
  controls.addEventListener('click', (e) => {
    // 向上查找最近的 .control 元素（兼容点击图标或 div 本身）
    const control = e.target.closest('.control');
    if (!control || !control.dataset.id) return;

    const targetId = control.dataset.id;
    console.log('导航到:', targetId);

    // 移除所有 section 的 active 状态
    sections.forEach(sec => sec.classList.remove('active'));

    // 激活对应 section
    const targetSection = document.getElementById(targetId);
    if (targetSection) {
      targetSection.classList.add('active');
    }

    // 同步更新按钮高亮状态
    document.querySelectorAll('.control').forEach(btn => 
      btn.classList.toggle('active-btn', btn.dataset.id === targetId)
    );
  });
});

? 关键修复点说明：

• ❌ 错误：allsections.forEach(... e.addEventListener("click", ...)) —— 给整个 或
  添加点击监听，语义错位且易捕获无关点击；
• ✅ 正确：仅监听 .controls 区域，聚焦业务上下文；
• ❌ 错误：直接访问 e.target.dataset.id —— 忽略了 DOM 事件冒泡与目标层级；
• ✅ 正确：使用 e.target.closest('.control') 确保无论点击图标还是空白区域，都能安全获取携带 data-id 的容器；
• ✅ 补充：添加 DOMContentLoaded 保障 DOM 加载完成后再执行逻辑，避免查询不到元素；
• ✅ 健壮性：加入 if (!control || !control.dataset.id) return 防御性判断，杜绝 undefined 报错。

? 小贴士：CSS 可选增强体验

为提升可点击区域感知，建议给 .control 添加基础样式：

.control {
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.control:hover {
  background-color: #f0f0f0;
}

这样，无论用户点击图标还是按钮边缘，都能准确触发导航，彻底解决“有时 undefined，有时正常”的随机性问题。