关闭dialog元素后如何让pointermove事件在触摸设备持续触发？

在触摸设备上，当你在pointerdown事件中立即调用dialog.close()，会导致浏览器丢失触摸事件的上下文——因为模态对话框关闭后，拖拽元素（绿色方块）会从DOM中脱离原渲染上下文，浏览器无法继续跟踪后续的pointermove事件。而桌面端的鼠标事件处理机制不受此影响，因此能正常触发。

方案1：延迟关闭对话框 #

利用setTimeout将对话框的关闭操作放到事件循环的下一轮执行，让浏览器先完成pointerdown事件的上下文绑定，再执行关闭：

dialog.showModal();

button.addEventListener("pointerdown", () => {
    // 延迟关闭，保留触摸事件上下文
    setTimeout(() => {
        dialog.close();
    }, 0);
});

container.addEventListener("pointermove", () => {
    console.log("move");
});

方案2：先迁移拖拽元素再关闭对话框 #

将拖拽元素从对话框中移动到页面DOM结构中，再关闭对话框，同时通过setPointerCapture确保事件跟踪不中断：

dialog.showModal();

button.addEventListener("pointerdown", (e) => {
    // 将拖拽元素迁移到body下
    document.body.appendChild(button);
    // 捕获当前pointer事件，确保后续move事件能触发到元素
    button.setPointerCapture(e.pointerId);
    // 关闭对话框
    dialog.close();
});

// 可以直接在拖拽元素上监听move事件，更可靠
button.addEventListener("pointermove", () => {
    console.log("button move");
});

container.addEventListener("pointermove", () => {
    console.log("container move");
});

• touch-action: none的设置是正确的，它禁用了浏览器默认的触摸行为（如滚动、缩放），避免干扰自定义拖拽逻辑。
• 触摸设备对事件目标的存在性更敏感，一旦事件触发的目标元素从DOM中移除，后续事件会被终止；桌面端鼠标事件则允许目标元素移除后仍能通过捕获/冒泡触发事件。

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