onbeforeunload event is too enthusiastic in IE9

Question

Here's some sample test html:

<!DOCTYPE html>
<html>
  <body>
    <a href="javascript:alert('Not going anywhere!');">Go nowhere 1</a>
    <a href="javascript:void(0);" onclick="alert('Not going anywhere!');">Go nowhere 2</a>
    <a href="http://www.google.com">Go somewhere</a>
    <script type="text/javascript">
      window.onbeforeunload = function() { return "Really leave?"; };
    </script>
  </body>
</html>

This is available as a working page here: timjeanes.com/ie9_onbeforeunload.htm

In Firefox, Chrome and Safari, I get the behaviour I want. That is, clicking either of the first two links shows an alert dialog; clicking the third link (or otherwise navigating away) shows the "Are you sure you want to leave this page?" message.

However, in IE9, the "Are you sure you want to leave this page?" message also shows when you click either of the first two links, even though no navigation is taking place - we're just running some javascript.

Is there something I'm doing wrong? Or is there a nice workaround for IE?

One option would be to use href="#" and put my javascript in the onclick. I'm not keen on that as it takes the user to the top of the page, and my real-life page is quite tall.

I've not tested in other versions of IE.

It's really icky to put your JavaScript in the "href" anyway. Put it in the event handler attribute or, better yet, attach it dynamically with separate unobtrusive JavaScript code. If your event handler(s) cancel the default action of the click, then the browser will not scroll the page. — Pointy, Aug 31 '11 at 20:59
Yeah, I'm using unobtrusive javascript in real life; I just wanted to keep things brief in the sample code. Putting it in the href was to demonstrate that that wasn't a solution. Thanks though. — teedyay, Aug 31 '11 at 21:07

gilly3 · Accepted Answer · 2011-08-31T21:13:54.143

That's a pretty unfortunate bug. It seems you'll have to work around it, and using the hash link method is probably the best way. To avoid taking the user to the top of the page, cancel the event using event.preventDefault() and event.returnValue = false.

function myClickHandler(e) {
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
    alert("Not going anywhere!");
}

Call it like this:

<a href="#" onclick="myClickHandler(event)">Go nowhere 1</a>

Edit: You could cancel the event for all the hash-links on your page like this:

var links = document.links;
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    if (link.href == "#") {
        if (link.addEventListener) {
            link.addEventListener("click", cancelEvent, false);
        }
        else if (link.attachEvent) {
            link.attachEvent("onclick", cancelEvent);
        }
    }
}
function cancelEvent(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
}

Or with jQuery using just one line of code:

$("a[href='#']").click(function (e) { e.preventDefault(); });

Oh, I like this! I went for `$('a[href=#]').live('click', function (e) { e.preventDefault(); });` to cover hyperlinks that get created later on (it's quite a dynamic page). — teedyay, Aug 31 '11 at 21:33

score 5 · Answer 2 · answered Jun 25 '14 at 19:15

5

A simpler solution is to use onunload in IE and onbeforeunload in other browsers.

answered Jun 25 '14 at 19:15

CpnCrunch

4,831
1
33
31

This worked for me...I just changed it to onunload and now it works in all browsers... – Rich701 Sep 12 '15 at 01:43

score 4 · Answer 3 · edited Dec 03 '12 at 13:58

4

#null in href to prevent page jumping rather than just # and script in onclick=""

edited Dec 03 '12 at 13:58

Parth Soni

11,158
4
32
54

answered Dec 03 '12 at 13:32

Stuart Green

49
1

John Hartsock · Answer 4 · 2011-09-01T14:13:22.623

2

You should not bind an event for click using href="javascript:...: Below is not good.

<a href="javascript:alert('Not going anywhere!');">Go nowhere 1</a>

If your going to use an onclick and void the href then just return false in the onclick.

<a onclick="alert('Not going anywhere!');return false;">Go nowhere 2</a>

edited Sep 01 '11 at 14:13

answered Aug 31 '11 at 21:03

John Hartsock

85,422
23
131
146

Note that if you don't have an href then you won't get a pointer cursor when you hover over the link. If you want the pointer cursor: You can set href to "#". Or do it in css like this: http://stackoverflow.com/questions/2409836/how-to-set-cursor-style-to-pointer-for-links-without-hrefs – Curtis Yallop Aug 07 '14 at 21:48

score 1 · Answer 5 · answered Aug 31 '11 at 21:23

1

It's actually not a bug that the "Are you sure you want to leave this page?" message pops up when you click the first links; it seems to be a "feature" in IE 9 - More reasons I dislike IE

answered Aug 31 '11 at 21:23

clarkb86

673
5
21

I see that document says, "Default action: Signals that the document is about to be unloaded." But it's nooooooot being unloaded! Flippin' IE. I really thought version 9 would take it off the number one slot in my list of most-sworn-at browsers, but no. – teedyay Aug 31 '11 at 21:37

onbeforeunload event is too enthusiastic in IE9

5 Answers5

Linked