Avoid firing click event in floatables when user drags the mouse
Alternative approach at fixing #2484
This commit is contained in:
parent
bd79a063ca
commit
2e1c3fa335
@ -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 };
|
||||
|
Loading…
Reference in New Issue
Block a user