Hello everyone,
I’m currently working on a page that features a live view, and I’m aiming to prevent users from accidentally leaving the page. To achieve this, I’m utilizing the beforeunload browser event in conjunction with a Phoenix hook. The structure of the hook is as follows:
export default function preventPageLeave() {
const beforeUnloadListener = (event) => {
// Prevent navigation and display a confirmation dialog
event.preventDefault();
event.returnValue = '';
};
return {
mounted() {
window.addEventListener("beforeunload", beforeUnloadListener, { capture: true });
}
};
}
This approach works seamlessly; however, I’m encountering a challenge when dealing with links on the page that use the link/1 function. For redirects managed by the Phoenix socket, which don’t necessitate a full page reload like navigation or patch operations, the beforeunload technique doesn’t prove effective.
Regrettably, I haven’t yet found an elegant solution to address this particular issue. I would greatly appreciate any insights or suggestions you might have.
Thank you in advance for your assistance!
