Avoid firing click event in floatables when user drags the mouse

Alternative approach at fixing #2484
This commit is contained in:
Damien Elmes 2023-05-01 11:41:19 +10:00
parent bd79a063ca
commit 2e1c3fa335

View File

@ -34,7 +34,40 @@ function eventStore<T extends EventTarget, K extends keyof EventTargetToMap<T>>(
export default eventStore;
const documentClick = eventStore(document, "click", MouseEvent);
/**
* A click event that fires only if the mouse has not appreciably moved since the button
* was pressed down. This was added so that if the user clicks inside a floating area and
* drags the mouse outside the area while selecting text, it doesn't end up closing the
* floating area.
*/
function mouseClickWithoutDragStore(): Readable<MouseEvent> {
const initEvent = new MouseEvent("click");
return readable(
initEvent,
(set: Subscriber<MouseEvent>): Callback => {
let startingX: number;
let startingY: number;
function onMouseDown(evt: MouseEvent): void {
startingX = evt.clientX;
startingY = evt.clientY;
}
function onClick(evt: MouseEvent): void {
if (Math.abs(startingX - evt.clientX) < 5 && Math.abs(startingY - evt.clientY) < 5) {
set(evt);
}
}
document.addEventListener("mousedown", onMouseDown);
document.addEventListener("click", onClick);
return () => {
document.removeEventListener("click", onClick);
document.removeEventListener("mousedown", onMouseDown);
};
},
);
}
const documentClick = mouseClickWithoutDragStore();
const documentKeyup = eventStore(document, "keyup", KeyboardEvent);
export { documentClick, documentKeyup };