We help IT Professionals succeed at work.

Can addEventListener be used to register an event on beforeunload?

avernet
avernet asked
on
3,879 Views
Last Modified: 2008-04-16
On Firefox, I'd like to have one of those confirmation dialog to warn users they are leaving a web page. I can do this with:

    window.onbeforeunload = function() {
        return "Are you sure you want to leave this great page?";
    }

That works great. But I'd like to use addEventListener instead. So I wrote the following, which does not work:

    window.addEventListener("beforeunload", function() {
        return "Are you sure you want to leave this great page?";
    }, false);

Any idea on how to make this work when registering the event handler with addEventListener() instead of setting window.onbeforeunload?

Alex
Comment
Watch Question

did you try using the alert method?

window.addEventListener("beforeunload", function() {
        alert("Are you sure you want to leave this great page?");
    }, false);

Author

Commented:
Well, the alert comes up, but you can only do "OK" on the alert. You can't cancel. And after you press OK the browser continues loading the other page you were going to.

Alex

Commented:
use confirm:
 if(confirm("Are you sure you want to leave this great page?")){
      alert("clicked yes");
}else{
      alert("clicked no");
}
This is just a quess, but how about (didn't test it)
window.addEventListener("beforeunload", function() {
  return confirm("Are you sure you want to leave this great page?");
}, false);

Open in new window

Author

Commented:
Using confim() in the handler shows the confirmation dialog. But whatever option you choose, the browser will take you to the other page. You can put "return false" in there, and it still won't stop navigation to another page :(.

Alex
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
@mplungjan: I didn't test your proposal, but what good is setting event's returnvalue into a string literal going to accomplish?
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
@DiscoNova: perhaps because that is the way microsoft implemented it and how FF copied it?

http://msdn2.microsoft.com/en-us/library/ms536907(VS.85).aspx

When a string is assigned to the returnValue property of window.event, a dialog box appears that gives users the option to stay on the current page and retain the string that was assigned to it. The default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered.
Microsoft's documentation states that the possible values for the returnValue are true and false. On my understanding, a string literal would evaluate to true, which should imply that the default action is to be taken (whereas a value evaluating to false should cancel the default action; that being "to unload the page").

So, once again, even though the documentation states one thing, the implementation is a whole different beast. It seems like the code you provided works. Quite frustrating :)
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
the documentation on onbeforeonload is very clear I would say...
they just overloaded the returnValue to contain the actual message
Yes. I was talking of the page concerning the returnValue-property (which is where I would actually begin my search for things concerning it... silly me:)

Author

Commented:
I think a good way to sum this up is to say that:

You cannot use window.addEventListener() to register an event handler on "beforeunload". You need to register it "the old way" with:

    window.onbeforeunload = function() {
        return "Are you sure you want to leave this great page?";
    }

If no one disagrees, I suggest this last comment to be marked as the "answer". Thank you all for contributing.

Alex
Forced accept.

Computer101
EE Admin

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.