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:
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.
Thanks for the reply, yes I tried this approach already something like this
On mount, I could do
const links = document.querySelectorAll("a")
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener("click", triggerBeforeUnload);
}
This works but I believe it is not the best idea, for example the live view might add new links to the dom on a certain user interaction which would not have the event listener and would therefore fail to intercept the event.
I feel like this is a common use case and there should be a elegant way to handle it.