移动端与桌面端blur/pointerup事件监听差异及适配方案咨询

问题 #

我编写了一段JavaScript代码，试图通过等待下一次pointerup事件来延迟执行blur触发后的相关函数，代码如下：

/* anonymous pointer listeners for debugging */
window.addEventListener("pointerdown", () => {console.log("pointerdown");});
window.addEventListener("pointerup", () => {console.log("pointerup");});

const handlePointerUp = () => {
    console.log("--- detected pointer up so remove the event listener");
    window.removeEventListener("pointerup", handlePointerUp);
}

const handleBlur = () => {
    console.log("--- focus lost so listen for next pointer up");
    window.addEventListener("pointerup", handlePointerUp);
}

document.getElementById("someButton").addEventListener("blur", handleBlur);

在桌面端运行时，控制台日志顺序符合预期：

// first time click on someButton
pointerdown
pointerup
// clicking away from someButton
pointerdown
--- focus lost so listen for next pointer up
pointerup
--- detected pointer up so remove the event listener

但移动端的日志顺序存在差异：

// first time click on someButton
pointerdown
pointerup
// clicking away from someButton
pointerdown
pointerup
--- focus lost so listen for next pointer up

移动端的blur事件会在触摸释放（pointerup）后才触发，而非像鼠标点击那样在触发时立即执行，导致监听的pointerup事件已提前发生，无法达到预期效果。如何实现两端一致的功能？

解决方案 #

核心问题在于移动端触摸交互中blur事件的触发时机滞后于pointerup，可以通过以下两种方案解决：

方案一：通过全局pointerdown预判焦点丢失 #

放弃直接监听按钮的blur事件，转而监听全局pointerdown事件，判断点击目标是否为按钮本身，若不是且当前焦点在按钮上，则标记需要在pointerup后执行逻辑：

/* anonymous pointer listeners for debugging */
window.addEventListener("pointerdown", () => {console.log("pointerdown");});
window.addEventListener("pointerup", () => {console.log("pointerup");});

const someButton = document.getElementById("someButton");
let shouldTriggerPostBlurLogic = false;

const handlePointerUp = () => {
    if (shouldTriggerPostBlurLogic) {
        console.log("--- detected pointer up after focus loss");
        shouldTriggerPostBlurLogic = false;
    }
}

window.addEventListener("pointerup", handlePointerUp);

window.addEventListener("pointerdown", (e) => {
    if (someButton === document.activeElement && e.target !== someButton) {
        console.log("--- focus will be lost, waiting for pointer up");
        shouldTriggerPostBlurLogic = true;
    }
});

这种方式在桌面和移动端的事件逻辑完全一致，因为pointerdown触发时就能预判焦点即将丢失，提前标记状态，等pointerup触发时执行对应逻辑。

方案二：在blur事件中用微任务延迟处理 #

如果必须保留blur事件监听，可以在blur回调中使用queueMicrotask（或setTimeout(..., 0)）延迟绑定pointerup监听或执行后续逻辑，确保在当前事件循环结束（即pointerup触发完成）后再处理：

/* anonymous pointer listeners for debugging */
window.addEventListener("pointerdown", () => {console.log("pointerdown");});
window.addEventListener("pointerup", () => {console.log("pointerup");});

const handlePointerUp = () => {
    console.log("--- detected pointer up so remove the event listener");
    window.removeEventListener("pointerup", handlePointerUp);
}

const handleBlur = () => {
    console.log("--- focus lost, scheduling post-pointerup logic");
    // 用微任务延迟执行，确保在pointerup事件完成后处理
    queueMicrotask(() => {
        // 若需求是处理导致blur的本次pointerup，直接执行逻辑即可
        console.log("--- executing post-blur logic after pointerup");
        // 若需求是等待下一次任意pointerup，再绑定监听
        // window.addEventListener("pointerup", handlePointerUp);
    });
}

document.getElementById("someButton").addEventListener("blur", handleBlur);

如果你的需求是等待导致blur的那次pointerup完成后执行逻辑，方案二更直接；如果是等待下一次任意pointerup，方案一的预判方式更可靠。

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