本文讲解如何通过现代 javascript 事件委托机制，精准定位并显示与被点击按钮（含唯一 id）相匹配的嵌套弹窗内容，避免 `queryselector` 全局匹配导致的“总是显示第一个弹窗”问题。
在实际开发中，当多个按钮共享同一类名（如 .button），仅靠 document.querySelector(".popup") 会始终返回 DOM 中第一个匹配的弹窗元素，导致无论点击哪个按钮，都只显示第一个弹窗内容——这正是你遇到的核心问题。
根本原因在于：querySelector 是全局查找，不感知事件上下文；而你需要的是相对于被点击按钮的局部查找。解决方案是利用事件对象（event）获取触发元素（e.currentTarget 或 e.target），再在其子树内精确查找 .popup。
以下是推荐的现代、健壮实现方式（无需内联 onclick，语义清晰且易于维护）：
<div class="button" id="1">按钮一 <div class="popup">你点击了第一个按钮</div> </div> <div class="button" id="2">按钮二 <div class="popup">你点击了第二个按钮</div> </div>
// 为所有 .button 元素批量绑定点击事件
document.querySelectorAll('.button').forEach(button => {
button.addEventListener('click', function(e) {
// 在当前被点击的 button 元素内部查找 .popup
const popup = this.querySelector('.popup');
if (popup) {
popup.style.width = '100%';
// 可选：添加过渡效果提升体验
popup.style.transition = 'width 0.3s ease';
}
});
});⚠️ 注意事项：
- 移除内联 onclick：原代码中 <div onclick="openPopup()"> 与脚本逻辑耦合度高，不利于调试和复用；统一使用 addEventListener 更规范。
- ID 命名规范：HTML ID 不应以纯数字开头（如 id="1"），建议改用 id="btn-1" 或 data-id="1" 配合 dataset 使用，确保兼容性与语义正确性。
- 关闭逻辑补充：实际项目中需支持点击遮罩层或按 Esc 键关闭弹窗，可监听 popup 外部点击或 keydown 事件。
- 性能提示：若按钮动态增删，建议改用事件委托（绑定到父容器），例如 document.body.addEventListener('click', e => { if (e.target.matches('.button')) { ... } });。
总结：关键思维转变是从“全局查找弹窗”转向“从触发源局部查找”，结合 this（或 e.currentTarget）与 querySelector 的组合，即可实现一一对应的精准弹窗控制。这是前端交互开发中最基础也最重要的 DOM 定位模式之一。
