Chrome仅在devtools开启时拖拽事件触发位置错误问题咨询

这是MacOS平台Chrome 94~96版本范围内的已知原生BUG，并非你遗漏配置导致。

触发原因 #

• 该BUG仅在Mac端Chrome开启DevTools时出现，根源是Chrome计算拖拽事件命中区域时，错误将窗口附着的DevTools高度偏移量纳入了元素坐标计算逻辑，导致元素的可响应拖拽区域整体向下偏移75~100px，和你观测到的偏移距离完全匹配。
• 仅Mac端出现的原因是Mac版Chrome的窗口渲染层、DevTools附着逻辑和Windows版存在实现差异，该问题在Chrome 97正式版已经被官方修复。

临时规避方案 #

如果暂时无法升级Chrome版本，可以通过以下两种方式规避问题：

• 在拖拽事件触发时额外校验坐标范围：通过getBoundingClientRect()获取目标元素的实际坐标，和拖拽事件的event.clientX、event.clientY比对，仅当光标坐标落在元素实际坐标范围内时才执行业务逻辑，示例代码如下：

const dragTarget = document.querySelector('#你的拖拽目标元素ID')
const targetRect = dragTarget.getBoundingClientRect()

// 坐标范围校验方法
function checkPointerInArea(clientX, clientY) {
  return clientX >= targetRect.left 
    && clientX <= targetRect.right 
    && clientY >= targetRect.top 
    && clientY <= targetRect.bottom
}

// 在各拖拽事件中先做校验
dragTarget.ondragenter = (e) => {
  if (!checkPointerInArea(e.clientX, e.clientY)) return
  // 原有业务逻辑
}
dragTarget.ondragover = (e) => {
  e.preventDefault()
  if (!checkPointerInArea(e.clientX, e.clientY)) return
  // 原有业务逻辑
}
dragTarget.ondrop = (e) => {
  e.preventDefault()
  if (!checkPointerInArea(e.clientX, e.clientY)) return
  // 原有业务逻辑
}

• 调试阶段将DevTools从页面附着模式改为独立窗口模式，也可以直接规避坐标偏移问题。

内容的提问来源于stack exchange，提问作者Christopher Williams