Firefox中在div按下鼠标拖动至按钮上松开时触发按钮click事件的原因及阻止方法

我来帮你拆解这个Firefox独有的问题，分析原因并给出可行的解决办法~

原因分析 #

这个差异本质上是 Firefox 对指针捕获（setPointerCapture）与合成 click 事件的逻辑实现和其他浏览器不同：

• 当你在红色 div 上按下鼠标触发 pointerdown 并设置指针捕获后，Firefox 会把后续所有 pointer 系列事件（pointermove、pointerup）都绑定到 div 上，这部分和其他浏览器一致。
• 但 click 事件是浏览器通过 mousedown + mouseup 两个基础事件合成的。在 Chrome/Edge/Safari 中，指针捕获会让 mouseup 也归属于 div，所以不会在按钮上触发 click；但 Firefox 在这种场景下，会将 mouseup 事件派发到鼠标释放时的实际元素（也就是按钮），进而错误地合成了按钮的 click 事件——这就是你看到的差异。

你之前尝试在 pointerup 里调用 releasePointerCapture 没用，是因为这个问题出在浏览器合成 click 事件的底层逻辑上，单纯释放捕获无法修正 Firefox 的事件合成规则。

解决方法 #

这里提供两种针对性的解决思路，都能解决你的测试场景：

方案一：在按钮的click事件中校验触发来源 #

通过跟踪按钮上的 mousedown 事件，只有当鼠标按下和松开都发生在按钮上时，才执行按钮的点击逻辑，直接过滤掉拖动触发的无效点击：

const btn = document.getElementById("btn");
let btnHasMousedown = false;

// 跟踪按钮上的mousedown事件
btn.addEventListener("mousedown", () => btnHasMousedown = true);
// 鼠标移出或松开时重置状态
btn.addEventListener("mouseup", () => btnHasMousedown = false);
btn.addEventListener("mouseleave", () => btnHasMousedown = false);

btn.addEventListener("click", () => {
  // 只有当mousedown确实发生在按钮上时，才执行逻辑
  if (btnHasMousedown) {
    console.log("btn clicked");
  }
  btnHasMousedown = false; // 重置状态，避免影响下次点击
});

const div = document.getElementById("div");
div.addEventListener("pointerdown", (e) => {
  e.target.setPointerCapture(e.pointerId);
});

方案二：在div的pointerup事件中阻止无效click #

在 div 的 pointerup 事件中，判断鼠标是否在 div 上释放，如果是拖动到其他元素（比如按钮）释放的，就直接阻止该元素的 click 事件：

const btn = document.getElementById("btn");
btn.addEventListener("click", () => console.log("btn clicked"));

const div = document.getElementById("div");
div.addEventListener("pointerdown", (e) => {
  e.target.setPointerCapture(e.pointerId);
});

div.addEventListener("pointerup", (e) => {
  // 先释放指针捕获
  e.target.releasePointerCapture(e.pointerId);
  // 获取鼠标释放时的元素
  const releaseElement = document.elementFromPoint(e.clientX, e.clientY);
  // 如果释放的元素不是div，阻止它的click事件
  if (releaseElement !== div) {
    // 用捕获阶段监听一次全局click，用完即删
    const blockUnwantedClick = (clickEvt) => {
      if (clickEvt.target === releaseElement) {
        clickEvt.stopImmediatePropagation();
        document.removeEventListener("click", blockUnwantedClick, true);
      }
    };
    document.addEventListener("click", blockUnwantedClick, true);
  }
});

补充说明 #

这个问题属于 Firefox 对指针事件和鼠标事件合成逻辑的实现差异，并非你的代码写法错误。考虑到你提到这和 UI 组件库的兼容问题相关，上面的两种方法可以作为临时兼容方案，后续也可以关注组件库的官方兼容更新。

备注：内容来源于stack exchange，提问作者Wave-SYJ