DEV Community

Phong Duong
Phong Duong

Posted on • Originally published at phongduong.dev on

Alert when user leaves the web page

To know when users leave the web page, you listen to beforeunload. This event is fired before the window is unloaded.

It is because of the browser's support. In the event handler, you can call preventDefault() on the event, assign a string to the event's returnValue property and return a string. You should combine these methods if your web page runs on multiple browsers.

window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = '';
});
Enter fullscreen mode Exit fullscreen mode

When the user tries to leave the page like refreshing, closing the tab, or going back, it is going to show a confirm dialog.

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay