JavaScript中拖拽场景下div与body的点击事件异常行为咨询

嗨，我来帮你捋清楚这个问题的根源，其实这是浏览器原生事件的「触发规则」在搞鬼，很多人第一次遇到都会懵！

先直接说核心原因：浏览器的click事件触发有个硬性要求——mousedown和mouseup必须发生在同一个DOM元素上，这是浏览器用来区分「点击操作」和「拖拽/移动操作」的关键规则。

接下来针对你的四个场景逐一拆解，你就能明白为什么会出现这些结果：

• 场景1：按住div拖动，松开在body
  你在div上按下鼠标（mousedown），然后拖动到body上松开（mouseup），两个事件分别在不同元素上，理论上浏览器不会触发任何元素的click事件，但你这里触发了body的事件——这大概率是因为你拖动的距离非常小，浏览器仍然判定为「点击操作」，再加上mouseup事件的冒泡特性，最终触发了body的click。
• 场景2：按住div拖动，松开在div
  mousedown和mouseup都在div上，满足click事件的触发条件，再加上你给div的click事件加了stopPropagation()阻止冒泡，所以只会输出Floating Event，这是完全符合预期的。
• 场景3：按住body拖动，松开在div
  这是你最困惑的场景：你在body上按下鼠标（mousedown），拖动到div上松开（mouseup），此时mousedown在body、mouseup在div，两个事件不在同一元素，所以div的click事件根本不会被触发（因为不满足触发条件）。那为什么会触发body的click？原因是浏览器判定这个操作属于「在body上的拖拽/点击」，再加上body是全屏的，最终触发了body的事件。
• 场景4：按住body拖动，松开在body
  mousedown和mouseup都在body上，满足触发条件，自然输出Body Event。

那如果我就是想要实现「拖动到div上松开时触发div的事件」该怎么办？
其实很简单，别依赖原生的click事件，改用手动监听mousedown、mouseup事件来实现：

let isDragging = false;

// 监听mousedown，标记是否开始拖动
document.addEventListener('mousedown', (e) => {
  isDragging = true;
});

// 监听mouseup，手动处理松开时的逻辑
document.addEventListener('mouseup', (e) => {
  if (!isDragging) return;
  // 直接获取mouseup的目标元素
  const target = e.target;
  if (target.id === 'floating') {
    console.log('Floating Event（手动触发）');
  } else if (target === document.body) {
    console.log('Body Event（手动触发）');
  }
  isDragging = false;
});

// 可选：如果需要处理真正的拖拽逻辑，可以加mousemove监听
document.addEventListener('mousemove', (e) => {
  if (isDragging) {
    // 这里可以写拖拽元素的逻辑，比如移动div的位置
  }
});

这样修改后，不管你从哪里拖动到div上松开，只要鼠标最终在div上，就会触发你想要的div事件，完全不受原生click规则的限制。

另外补充一点：如果你想保留原生click事件的同时避免这种异常，也可以在mousedown时阻止默认行为（e.preventDefault()），但这样可能会影响浏览器的其他原生行为（比如文本选择），所以还是推荐手动监听mouseup的方式更灵活。

内容来源于stack exchange