JUCE WKWebView 中 setPointerCapture 后为何不触发释放事件？

结论

先保留 Pointer Events，查清拖拽时事件流在哪一步中断。目前的信息还不足以确认 JUCE 或 WKWebView 存在指针捕获缺陷，也无法证明 transform: translateX() 导致了 pointercancel。

setPointerCapture() 会让指针离开元素边界后的后续指针事件继续发给捕获元素。因此，“移出元素原来的可视边界便取消拖拽”不符合指针捕获的预期行为。Pointer Events：指针捕获

优先检查：

• 浏览器是否启动了原生 HTML 拖放，或接管了直接操作滚动。
• 拖拽代码是否提前执行了取消和清理，导致后续事件被忽略，或监听器已被移除。

改用 document 上的鼠标事件，也不一定能解决这两类问题。

为什么 document 上也收不到释放事件

{ capture: true } 指的是 DOM 事件传播的捕获阶段，与 setPointerCapture() 是两回事。它只能提前观察已经分发到当前文档的事件，无法让浏览器补发事件，也不能捕获原生宿主收到的全部鼠标输入。

原生拖放可能中断自定义拖拽

检查卡片中的图片、链接、选中文本，以及显式设置了 draggable="true" 的元素。原生 HTML 拖放一旦启动，浏览器就会进入另一套交互流程。HTML 标准规定，拖放期间会抑制鼠标等设备输入事件，因此增加 mouseup 监听器也可能无效。HTML：拖放处理模型

不过，题目没有提供 dragstart 日志，是否触发了原生拖放还需要验证。

pointercancel 会结束当前指针流

浏览器接管平移、缩放或启动拖放等操作时，可以取消当前指针流。收到 pointercancel 后，应取消此次排序，不再等待同一次交互的 pointerup。取消还会隐式释放指针捕获。Pointer Events：指针流抑制

仅凭 overflow-x: auto 不能判断发生了取消。touch-action 约束的是直接操作产生的平移和缩放，不能禁止文本选择或 HTML 拖放，也不能通用于修复桌面鼠标事件丢失的问题。Pointer Events：touch-action

原代码可能掩盖了实际事件顺序

原代码在 finish(false) 中立即执行以下操作：

1. 将 dragging 设为 false。
2. 移除文档上的释放监听器。
3. 释放指针捕获。

如果取消先发生，业务回调可能已经无法观察到后续事件。只在 finish() 或 if (dragging) 后面打印日志，就无法区分事件究竟没有分发，还是被业务逻辑忽略了。

先记录完整事件顺序

把诊断监听器放在拖拽函数外，拖拽结束时也保留它们。以下代码仅用于排查，确认原因后应删除：

const debugController = new AbortController();

for (const type of [
  'pointerdown', 'pointerup', 'pointercancel',
  'gotpointercapture', 'lostpointercapture',
  'mousedown', 'mouseup', 'dragstart', 'dragend'
]) {
  window.addEventListener(type, (e) => {
    console.log(type, {
      time: performance.now(),
      target: e.target,
      pointerId: e.pointerId,
      pointerType: e.pointerType,
      buttons: e.buttons
    });
  }, {
    capture: true,
    signal: debugController.signal
  });
}

// 排查结束后执行：
// debugController.abort();

同时在 finish() 入口记录具体的结束原因，不要只记录 commit 的布尔值。

根据日志继续排查：

正常释放也会产生 lostpointercapture，不能仅凭这个事件判断发生了异常。

保留 Pointer Events 的实现方式

让拖拽期间始终保留的元素负责捕获指针，例如滚动容器；卡片只用于显示位移。拖动时先计算目标索引，释放后再更新实际顺序，避免频繁重建卡片或捕获元素。

先限制拖拽手柄的默认行为：

.drag-handle {
  display: inline-block;
  touch-action: none;
  cursor: grab;
}

.drag-handle,
.drag-handle * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.node.dragging .drag-handle {
  cursor: grabbing;
}

如果手柄是普通内联 <span>，设置 display: inline-block 可以让 touch-action 对它生效。不要因此禁止整个滚动容器的触摸滚动。Pointer Events：touch-action 的适用范围

以下拖拽生命周期示例尚未在题述 JUCE/WKWebView 组合中实测。其中，getDropIndex() 计算目标索引，commit() 更新实际顺序，clearPreview() 移除落点指示器。

function attachDragReorder(card, scroller, {
  getNodeIdx,
  getDropIndex,
  commit,
  clearPreview = () => {}
}) {
  const handle = card.querySelector('.drag-handle');
  const lifetime = new AbortController();
  let drag = null;

  function finish(shouldCommit) {
    if (!drag) return;

    const current = drag;
    drag = null; // 在释放捕获前清空，避免重复收尾
    current.events.abort();

    card.classList.remove('dragging');
    card.style.transform = current.originalTransform;

    try {
      if (scroller.hasPointerCapture(current.id)) {
        scroller.releasePointerCapture(current.id);
      }
    } finally {
      clearPreview();

      if (
        shouldCommit &&
        current.moved &&
        current.to >= 0 &&
        current.to !== current.from
      ) {
        commit(current.from, current.to);
      }
    }
  }

  function update(e) {
    const dx = e.clientX - drag.startX
      + scroller.scrollLeft - drag.startScrollLeft;

    if (!drag.moved && Math.abs(dx) < 4) return;

    drag.moved = true;
    card.classList.add('dragging');
    card.style.transform = `translateX(${dx}px)`;
    drag.to = getDropIndex(e.clientX, card);
  }

  function onMove(e) {
    if (!drag || e.pointerId !== drag.id) return;

    // 释放事件遗漏后，如果再次收到移动且左键已松开，取消残留状态。
    if (e.pointerType === 'mouse' && (e.buttons & 1) === 0) {
      finish(false);
      return;
    }

    update(e);
  }

  function onUp(e) {
    if (!drag || e.pointerId !== drag.id) return;
    update(e);
    finish(true);
  }

  function onCancel(e) {
    if (drag && e.pointerId === drag.id) finish(false);
  }

  function onDown(e) {
    if (drag || !e.isPrimary || e.button !== 0) return;

    const events = new AbortController();
    drag = {
      id: e.pointerId,
      startX: e.clientX,
      startScrollLeft: scroller.scrollLeft,
      originalTransform: card.style.transform,
      from: getNodeIdx(),
      to: -1,
      moved: false,
      events
    };

    const options = { capture: true, signal: events.signal };

    document.addEventListener('pointermove', onMove, options);
    document.addEventListener('pointerup', onUp, options);
    document.addEventListener('pointercancel', onCancel, options);
    scroller.addEventListener('lostpointercapture', onCancel, options);

    window.addEventListener('blur', () => finish(false), {
      signal: events.signal
    });

    document.addEventListener('visibilitychange', () => {
      if (document.hidden) finish(false);
    }, { signal: events.signal });

    try {
      scroller.setPointerCapture(e.pointerId);
    } catch (error) {
      finish(false);
      console.warn('setPointerCapture failed', error);
    }
  }

  handle.addEventListener('pointerdown', onDown, {
    signal: lifetime.signal
  });

  // 此区域采用自定义排序，禁止进入原生 HTML 拖放。
  card.addEventListener('dragstart', (e) => {
    e.preventDefault();
  }, { signal: lifetime.signal });

  return () => {
    finish(false);
    lifetime.abort();
  };
}

使用时需要注意：

• scroller 必须保持连接，拖拽期间不能被框架重新挂载。组件卸载前应调用返回的清理函数。
• 示例会临时接管卡片的 transform。如果卡片已有缩放、旋转或位移动画，应增加专用视觉包装层。
• getDropIndex() 使用 clientX 时，应配合 getBoundingClientRect() 的视口坐标；计算插入位置时，要排除正在拖动的卡片。
• 示例未实现边缘自动滚动。如果加入自动滚动，需要在滚动或动画帧中同步刷新位移和落点。
• 收到 pointercancel、提前丢失捕获或失焦时，都按取消处理。取消时恢复预览，不提交排序。

失焦等兜底处理只能应对可观察到的中断。如果宿主没有向 WebView 发送释放或取消通知，JavaScript 监听器无法恢复那次事件。

什么时候考虑改用鼠标事件

在桌面鼠标场景中，可以用 mousedown、mousemove、mouseup 做对照实验，或作为兼容分支，但应先确认：

1. 已排除原生拖放、元素重建和提前清理。
2. 在同一最小用例中，禁用指针捕获后，鼠标事件路径能稳定收到释放事件。
3. 问题确实集中在目标 WKWebView 环境的 Pointer Events 路径。

如果原生拖放已经接管交互，换成鼠标事件仍可能丢失 mouseup。也不要同时运行两套拖拽状态机，否则一次操作可能重复启动或提交。

如果页面在 Safari 中正常，仅在 JUCE 插件中异常，再比较 JUCE 独立运行和具体插件宿主中的表现。记录 macOS 构建号、JUCE 具体版本及宿主版本。“Safari/WebKit 18.x”不足以精确定位嵌入式环境，WKWebView 的默认 UA 也存在版本信息不足的问题。WebKit 问题记录：macOS WKWebView 版本信息

备注：内容仅供参考。