feat: make custom context menu imitate browser context menu behavior

This commit is contained in:
SauceyRed 2025-08-16 15:46:54 +02:00
commit 839920f124
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
2 changed files with 23 additions and 10 deletions

13
app.vue
View file

@ -17,12 +17,21 @@ const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show:
onMounted(() => {
loadPreferredThemes()
document.addEventListener("pointerdown", (e) => {
document.addEventListener("contextmenu", (e) => {
if (contextMenu.value.show) {
e.preventDefault();
if (e.target instanceof Element && !e.target.classList.contains("context-menu-item")) {
removeContextMenu(contextMenu);
}
}
});
document.addEventListener("mousedown", (e) => {
if (e.target instanceof HTMLElement && e.target.classList.contains("context-menu-item")) return;
console.log("click");
console.log("target:", e.target);
console.log(e.target instanceof HTMLDivElement);
if (contextMenu.value.show) {
if (e.button != 2 && contextMenu.value.show) {
console.log("context menu is shown, hiding");
removeContextMenu(contextMenu);
}