Javascript blur 和 pointerup 的侦听器在桌面和移动设备之间的工作方式不同

Question

I have a bit of Javascript that I'm using to delay the execution of some function after a blur event has been triggered by waiting for the next 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 so listen for next pointer up");
    window.addEventListener("pointerup", handlePointerUp);
}

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

On Desktop this seems to work just fine and I get the console logs in the order that I expect

// 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

On Mobile the order is different

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

It is only triggering the blur after the touch event has been released and not at the start like it does with a mouse click, in which case it is listening for a pointer up that has already happened.

Is there a way to achieve the same thing as what currently would happen on a Desktop in a way that would work the same on Mobile?

Answer 1

The events for pointer and mouse work differently. Quoting MDN;

The pointerdown event is fired when a pointer becomes active. For mouse, it is fired when the device transitions from no buttons pressed to at least one button pressed. For touch, it is fired when physical contact is made with the digitizer.

https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerdown_event

I believe this is what's causing the effect. You can even emulate this by turning on "Toggle device toolbar" in chrome devtools.