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!