弹窗缩放通过事件委托统一监听手柄mousedown，捕获阶段记录方向与初始尺寸，document级mousemove按方向约束计算新宽高，实时设置style并限制边界。
在弹窗拖拽调整大小的交互中，事件委托本身不直接用于“锁定边缘手柄”，而是用来高效管理多个手柄（如右、下、右下角等）的 mousedown 事件；真正的“锁定”靠的是在捕获阶段记录目标手柄类型，并在后续 mousemove 中根据该类型约束缩放逻辑。宽高计算则需结合鼠标位移、初始尺寸和可缩放边界实时推导。
用事件委托统一监听手柄按下
将所有手柄（例如 class="resize-handle resize-e"、"resize-s"、"resize-se"）挂载到弹窗容器上，避免为每个手柄单独绑定事件：
- 给弹窗父元素（如
.modal）绑定mousedown事件，利用e.target判断是否点中某个手柄 - 通过
e.target.classList.contains('resize-')或正则匹配resize-(e|s|w|n|ne|nw|se|sw)提取方向标识（如'e'表示右侧） - 一旦命中，立即保存：手柄方向、弹窗当前
offsetWidth/Height、getBoundingClientRect()坐标、鼠标起始位置（clientX/clientY），并调用document.addEventListener('mousemove', onResize)
在 document 上响应拖拽并按方向约束计算
拖拽过程不在手柄上进行，而是在整个 document 监听 mousemove，这样即使鼠标划出手柄区域也不会中断操作：
-
onResize(e)中，根据之前保存的方向标识决定哪些维度可变：例如'e'只改宽度，'se'宽高都变，'n'只改高度但同时上移弹窗 - 用
e.clientX - startX计算横向位移 Δx，e.clientY - startY得 Δy；再结合初始宽高，得出新尺寸：
若方向是'e'→ 新宽度 = 初始宽度 + Δx；
若是'se'→ 新宽度 = 初始宽度 + Δx，新高度 = 初始高度 + Δy - 务必加入最小宽高限制（如 minWidth=300, minHeight=200）和最大边界（如不超过视口
window.innerWidth * 0.9），防止溢出或过小
实时更新样式并处理边界吸附（可选增强）
每次计算后应立即应用，而非等到 mouseup 才更新，保证视觉反馈连贯：
- 直接设置弹窗元素的
style.width和style.height（推荐用 px 单位，避免百分比干扰） - 若支持“贴边缩放”（如拉到屏幕右边缘自动铺满宽度），可在计算新宽度前判断：
if (newWidth > window.innerWidth * 0.95) newWidth = window.innerWidth - 拖拽结束时（
mouseup或mouseleave），清理document上的mousemove/mouseup监听器，防止内存泄漏
关键细节与避坑提示
这类交互容易忽略但影响体验的核心点：
-
阻止默认行为：在手柄
mousedown中调用e.preventDefault()，避免文字选中或图片拖拽干扰 - 使用 clientX/Y 而非 pageX/Y：确保滚动页面时不偏移计算（除非你明确需要文档坐标）
-
初始尺寸快照必须在 mousedown 瞬间获取：不要在 mousemove 里反复读
offsetWidth，否则会因上一次设置导致累积误差 -
手柄需有足够点击热区：CSS 中设置
resize-handle { width: 12px; height: 12px; }并加cursor: ew-resize等，提升可操作性
