# How to catch beforeunload and stop page to reload without alert
**URL:** https://discuss.hotwired.dev/t/how-to-catch-beforeunload-and-stop-page-to-reload-without-alert/3426
**Category:** General
**Created:** [October 28, 2021, 2:57pm UTC](https://discuss.hotwired.dev/t/how-to-catch-beforeunload-and-stop-page-to-reload-without-alert/3426 "2021-10-28T14:57:26Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@artur79](https://discuss.hotwired.dev/u/artur79)
#### Post date: [October 28, 2021, 2:57pm UTC](https://discuss.hotwired.dev/t/how-to-catch-beforeunload-and-stop-page-to-reload-without-alert/3426/1 "2021-10-28T14:57:26Z")
Hi, I’d like to add functionality, when it has been change and user clicks some link on the page it warns him about unsaved changes with my custom modal and prevents page to reload. I’v stucked in the moment when alert by the browser appears **“Changes that you made may not be saved.”** , how to get rid of it and stop page reload ?
```auto
//this.leavingPage = this.leavingPage.bind(this)
window.addEventListener("turbolinks:before-visit", this.leavingPage);
window.addEventListener("beforeunload", this.leavingPage);
}
disconnect() {
window.removeEventListener("turbolinks:before-visit", this.leavingPage);
window.removeEventListener("beforeunload", this.leavingPage);
}
leavingPage(event) {
event.stopPropagation()
event.preventDefault()
return false
}
```
I’v tried it also by adding to the form _data-action=“beforeunload@window-\>form-unsaved-changes#leavingPage”_ but same result
---
### Author:  [@yunggindigo](https://discuss.hotwired.dev/u/yunggindigo)
#### Post date: [October 29, 2021, 10:56pm UTC](https://discuss.hotwired.dev/t/how-to-catch-beforeunload-and-stop-page-to-reload-without-alert/3426/2 "2021-10-29T22:56:00Z")
Im not sure how you would tap into the turbolinks event for visiting a new page but what you could do is listen for all clicks on that page and then you can check if the click events target is a link element and then do whatever code you want to stop them
---
### Author:  [@tleish](https://discuss.hotwired.dev/u/tleish)
#### Post date: [November 2, 2021, 5:53pm UTC](https://discuss.hotwired.dev/t/how-to-catch-beforeunload-and-stop-page-to-reload-without-alert/3426/3 "2021-11-02T17:53:12Z")
Something like this?
```javascript
class ExitController extends Controller {
preventDefault(event) {
event.preventDefault();
return false;
}
confirm(event) {
event.returnValue = '';
return this.preventDefault(event);
}
}
```
```auto
Page 2
```
---
### Author:  [@artur79](https://discuss.hotwired.dev/u/artur79)
#### Post date: [November 8, 2021, 9:48am UTC](https://discuss.hotwired.dev/t/how-to-catch-beforeunload-and-stop-page-to-reload-without-alert/3426/4 "2021-11-08T09:48:55Z")
Thats big step forward thanks 🙂 Above solution works perfect when user clicks some link, moving to the other page is stopped and I can display modal or sth. But when I click back button in the browser I’m getting (at least at Chrome) standard alert with text “Changes that you made may not be saved.”. Any way to prevent it ?
---
### Author:  [@artur79](https://discuss.hotwired.dev/u/artur79)
#### Post date: [November 8, 2021, 12:34pm UTC](https://discuss.hotwired.dev/t/how-to-catch-beforeunload-and-stop-page-to-reload-without-alert/3426/5 "2021-11-08T12:34:03Z")
unfortunately after some testing I’v found that catching click is a fragile solution because any click is catched, like click some ajax link which adds some items to my form, or just clicking textarea to fill it etc … at least when I’v tried click event, no turbo.
I’d rather prefer some solution based only on beforeunload/onbeforeunload, if possible
---
### Author:  [@tleish](https://discuss.hotwired.dev/u/tleish)
#### Post date: [November 8, 2021, 4:33pm UTC](https://discuss.hotwired.dev/t/how-to-catch-beforeunload-and-stop-page-to-reload-without-alert/3426/6 "2021-11-08T16:33:34Z")
Since turbo navigates pages using fetch, the beforeunload is not fired. The only accomplish this by disabling turbo. You could re-enable it once the page becomes valid?
```javascript
connect() {
document.body.dataset.turbo = false; //. disable turbo
window.addEventListener("beforeunload", this.leavingPage);
}
disconnect() {
window.removeEventListener("beforeunload", this.leavingPage);
}
leavingPage(event) {
event.preventDefault();
event.returnValue = '';
return false;
}
```
---
### Author:  [@artur79](https://discuss.hotwired.dev/u/artur79)
#### Post date: [November 9, 2021, 3:59pm UTC](https://discuss.hotwired.dev/t/how-to-catch-beforeunload-and-stop-page-to-reload-without-alert/3426/7 "2021-11-09T15:59:23Z")
Thanks, I do not use turbo/turbolinks it this project particullary, here’s no turbo version based on yours, it may help someone. I do not set listener in connect but in data-action attribute like `beforeunload@window->form-unsaved-changes#confirm`
I’v also extended it by possiblity of disabling that leave page prompt by setting **skipCheck** to true. I do it by sending respective custom event and receiving it here.
```javascript
export default class extends Controller {
static value = { skipCheck: Boolean }
isFormChanged() {
// formChanges from here https://www.sitepoint.com/javascript-form-change-checker/
const form_changes = formChanges(this.element)
return (form_changes && form_changes.length > 0)
}
receiveSkipCheck(event) {
this.skipCheck = event.detail.value
}
leavingPage(event) {
if(!this.skipCheck && this.isFormChanged()) {
event.preventDefault()
event.returnValue = ''
return false;
}
}
}
```
btw, I think you’d just left event.preventDefault() in leavingPage() by coincidence, it’s rather not necessary here.
---
### Author:  [@artur79](https://discuss.hotwired.dev/u/artur79)
#### Post date: [November 29, 2021, 4:00pm UTC](https://discuss.hotwired.dev/t/how-to-catch-beforeunload-and-stop-page-to-reload-without-alert/3426/8 "2021-11-29T16:00:00Z")
I’m wondering about one more feature here, is there any way to catch that **Cancel** button has been clicked in confirmation dialog ? I need to apply some functionality in that case.