当文本域获得焦点并动态改变尺寸时，用户点击相邻按钮可能触发失败，原因是按钮在按下与释放阶段位置偏移导致 click 事件未被识别；本文提供 css 布局隔离与过渡延迟两种可靠解决方案。
当文本域获得焦点并动态改变尺寸时，用户点击相邻按钮可能触发失败，原因是按钮在按下与释放阶段位置偏移导致 click 事件未被识别；本文提供 css 布局隔离与过渡延迟两种可靠解决方案。
在 Web 开发中，一个看似无害的 CSS 规则 textarea:focus { height: 5rem; } 可能引发意想不到的交互问题：当用户先聚焦
根据 UI Events 规范，click 事件仅在同一目标元素上完成“按下（pointerdown）→ 移动（可选）→ 释放（pointerup）”全过程时触发。而当 textarea 聚焦后突然增高，下方按钮会瞬间下移；用户虽在视觉上“点击了按钮”，但实际发生了：
- pointerdown 发生在按钮原始位置（此时按钮尚在该处）；
- textarea 高度突变 → 按钮向下位移；
- pointerup 发生在原位置的空白区域（按钮已离开）→ 不满足 click 条件，事件被丢弃。
✅ 推荐解决方案一：CSS 布局隔离（推荐优先使用）
通过将按钮与文本域置于独立布局上下文中，使其尺寸变化互不影响：
<div class="text-box">
<textarea class="dx-texteditor-input" spellcheck="true" tabindex="0" role="textbox" aria-multiline="true"></textarea><button onclick="alert('ok');">test</button>
</div>
.text-box {
display: inline-grid;
grid-auto-flow: column;
align-items: start;
gap: 0.5rem; /* 可选：增加间距提升可访问性 */
}
.text-box textarea:focus {
height: 5rem;
}
✅ 优势：语义清晰、无 JS 依赖、完全避免重排干扰、符合无障碍最佳实践。
✅ 推荐解决方案二：平滑过渡 + 合理延迟（适用于必须动态调整高度的场景）
若业务强依赖聚焦时扩大文本域，可通过 CSS transition 控制变化节奏，确保 pointerup 仍落在按钮上：
textarea {
height: 2.5rem; /* 初始高度（需为可计算长度，如 rem/em/lh） */
transition: height 0.2s ease-out;
}
textarea:focus {
height: 5rem;
/* 立即应用新高度，但因 transition 存在，实际渐变发生 */
}
⚠️ 注意：transition 仅对可计算长度（如 rem, em, lh, px）有效，不可用 auto 或 min-content。若初始高度设为 auto，需改用固定值（如 2.5rem 或 3lh）。
⚠️ 补充建议
- 避免在交互过程中触发重排（layout shift）：这是 Core Web Vitals 中 CLS（累积布局偏移）的主要来源，影响用户体验与 SEO。
- 替代方案思考：多数场景下，用户更倾向手动拖拽调整
- 测试验证：在 Chrome DevTools 中启用 “Rendering > Layout Shift Regions” 可直观观察元素位移情况。
综上，布局隔离（Grid/Flex 容器）是最健壮、零副作用的解法；而过渡动画仅作为视觉增强的次选方案，需谨慎设置初始值与缓动参数。始终以用户操作的确定性为第一优先级。
