需手动捕获鼠标事件模拟Excel拖拽填充：mousedown记录锚点，mousemove反查悬停单元格，mouseup判断方向生成cellRange；填充前识别数字、日期、文本模式并智能递增；兼容IE需坐标映射替代selection；移动端用touch事件并禁用缩放；合并单元格需构建逻辑网格映射。
拖拽单元格右下角自动填充时，如何监听鼠标移动并计算目标区域
原生 HTML 表格没有 fill handle（填充柄）概念，必须手动捕获鼠标事件模拟 Excel 的拖拽行为。关键不是画个小方块，而是准确识别起始单元格、拖拽方向、终止位置，并推导出需填充的行列范围。
- 起始点用
mousedown在td或th上记录rowIndex和cellIndex，同时标记该单元格为“锚点” - 在
document上监听mousemove，结合getBoundingClientRect()反查当前鼠标悬停的td元素，避免因滚动或嵌套导致坐标错位 - 终止位置通过
mouseup触发，此时需判断拖拽是横向（列变化）、纵向（行变化）还是斜向（行列均变），再生成待填充的cellRange对象，如{ r1: 2, c1: 1, r2: 5, c2: 3 }
填充逻辑依赖单元格内容类型，不能统一复制字符串
Excel 填充会识别数字序列、日期、文本模式（如 “A1”, “B1”）等，HTML 表格 UI 模拟必须做类型判断，否则用户会立刻感知“不像”。
- 先用正则粗筛：
/^\d+$/判整数，/^\d{4}-\d{2}-\d{2}$/判日期，/^[a-zA-Z]\d+$/判类似 “A1” 格式 - 数字序列填充要计算步长：取起始两单元格差值（如 “2”→“5” 得步长 3），再用
r1 + (i * step)生成后续值 - 日期需用
new Date()运算，避免字符串拼接；文本模式如 “第1页”、“第2页”，应提取数字部分递增，再拼回前缀 - 若无法识别类型（如纯中文“苹果”、“香蕉”），默认按 Excel 行为——重复填充，而非智能序列
IE/Edge Legacy 下 getSelection() 不可靠，需 fallback 到 range 方案
现代浏览器可用 window.getSelection().anchorNode 辅助定位，但在 IE11 或旧 Edge 中该 API 返回值不稳定，容易指向父节点而非实际 td。此时必须绕过 selection，改用坐标映射。
- 记录
mousedown时鼠标相对于表格左上角的偏移clientX - table.getBoundingClientRect().left -
mousemove中遍历所有td，比对其getBoundingClientRect()是否包含当前鼠标坐标（加容差 ±2px 防止边缘误判） - 避免使用
document.elementFromPoint()—— 它在position: fixed或遮罩层存在时返回错误元素
移动端 touch 事件需单独适配，且禁用默认缩放
触摸屏没有“右下角小方块”的视觉反馈习惯，直接复用 PC 端拖拽逻辑会导致操作失败。必须重构交互路径。
- 用
touchstart替代mousedown，但触发后立即调用event.preventDefault()防止页面滚动干扰 - 在目标
td内部绝对定位一个半透明div作为填充柄图标，仅在touchstart后显示，尺寸不小于 44×44px（符合 iOS 触控最小区域） - 填充范围计算仍用坐标法，但触摸移动中用
touches[0].clientX/Y，而非mousemove的clientX/Y - 务必在
meta viewport中设置user-scalable=no，否则双指缩放会打断拖拽流程
真实项目里最容易被忽略的是单元格合并（rowspan/colspan）场景：拖拽跨越合并单元格时，填充区域计算会错乱。这需要在生成 cellRange 前先遍历表格 DOM，构建逻辑网格映射表，把物理行列转为连续逻辑索引——不是加几行代码就能绕过的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
