关键在于用data-row-id锚定上下文，避开索引失效；点击时向上查找data-row-id，再定位对应data-owner-id的输入框，聚焦前清空其他行活跃态并滚动可视，配合tab拦截确保单行编辑专注。
在多层嵌套的评论回复结构中，用事件委托精准定位并激活某一行的输入框，关键不是“找对元素”，而是“避开干扰、守住上下文”。核心在于利用结构特征和数据隔离，而不是依赖 DOM 位置索引或 class 名暴力匹配。
用 data-row-id 做唯一锚点，不碰 index
每条评论（含其回复区）在渲染时就带上唯一标识：<div class="comment-item" data-row-id="cmt-1024">。回复输入框则统一加 <code>data-owner-id="cmt-1024"。事件委托监听整个评论容器的点击，只响应带 data-trigger="reply" 的图标或按钮：
- 点击时读取最近的
data-row-id（向上查祖级），再据此筛选出对应data-owner-id的输入框 - 避免用
Array.from(...).findIndex()或parentNode.children.indexOf()——动态增删行会让索引失效 - 示例逻辑：
const owner = e.target.closest('[data-row-id]')?.dataset.rowId; const input = container.querySelector(`input[data-owner-id="${owner}"]`);
聚焦前清空其他行的活跃态，防误触
一次只允许一个回复框处于可编辑状态。触发新输入框前，先移除所有已展开的回复区（比如收起其他 .reply-form.open）、重置其他输入框的 value 和 disabled 状态：
- 用
container.querySelectorAll('.reply-form')批量操作，比逐个判断更稳 - 给当前目标输入框设
autofocus并调用.focus()，同时加scrollIntoView({block: 'nearest'})防遮挡 - 若用户中途点击别处，用
blur事件监听器自动收起当前行，保持单点专注
键盘交互同步处理：Tab 不跳到下条评论
默认 Tab 导航会跨行流动，破坏“单行编辑”意图。需限制焦点范围：
- 在展开回复区时，为该行设置
tabindex="-1"，并用focusable+onFocusChanged控制内部可聚焦元素（如输入框、发送按钮） - 监听
keydown，当按 Tab 且焦点在最后一个可聚焦项时，e.preventDefault()并手动将焦点移回输入框或关闭该行 - 配合
delegatesFocus: true（若回复框封装在 Shadow DOM 中），确保 Tab 进入后不会卡在容器边界
不复杂但容易忽略：真正的“准确”，来自数据绑定的干净和交互边界的清晰，而不是靠 JS 算索引有多准。
