Anchor "javascript:void(0)" causing window.onbeforeunload to fire on IE

Question

I am using a drop down widget called Chosen which has an anchor with a href javascript:void(0). When I click on the drop down it works but on IE it fires a new onbeforeunload event which is frustrating because the application confirms if you want to leave. And obviously you don't want to have those questions when you are inputting form data.

Is there a way to get rid of this problem without altering Chosen library?

Unfortunately this:

window.onbeforeunload = function (e) {
    console.log(window.location);
};

Does not log javascript:void(0) either, so, I can't use it to check the target URL.

This behavior occurs in IE9 at least, and that's what I'm concerned (not the older IEs).

Answer 1

The only solution I can see is to add returning of false to the onclick event handler of the links. It will tell IE that you're not planning to change the page by clicking on the link.

<a href="javascript:void(0);" onclick="doSomething(); return false;">Link</a>

The same can be written this way:

<script>
    function doSomething() {
        // do Something
        return false;
    }
</script>

<a href="javascript:void(0);" onclick="return doSomething();">Link</a>

Answer 2

I ended up listening to click events against the anchor and cancel the event to prevent onBeforeUnload from firing:

$chosen.find('.chzn-single').click(function() {
    return false;
});

Answer 3

I know that this is pretty old...But I have come across this recently for my work. We are unfortunately still forced to support IE9. We are using Angular.js on this project that will dynamically load new content onto a page when the user clicks on an anchor tag with a data-ng-click.

In your example all you would have to do is pass the event and within the function prevent the default action and stop it from bubbling up. To do this all you would have to do is this:

// Inside the HTML
{...}
<a href="javascript:void(0);" onclick="doSomething(evt);">Link</a>
{...}
<script>
    function doSomething(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        // Do Something
    };
</script>
{...}

In Angular all I did was the following:

// Inside the View
<a href="javascript:void(0)" data-ng-click="addStuff($event)">Add Stuff</a>

// Inside the controller
function addStuff($event) {
    $event.preventDefault();
    $event.stopPropagation();
    // Do Something
};

I hope that this isn't too late and I hope that it helps others.