CODEWITHSUNDEEP
javascriptinternet-explorerdom
Tower
Tower

Reputation: 102905

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

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).

Upvotes: 11

Views: 8068

Answers (6)

Giacomo Paita
Giacomo Paita

Reputation: 1419

Even if this question is old, i've anhanced the answer of @Bartosz, fixing the issue in the comment of @Oiva Eskola:

Wouldn't this prevent the window.onbeforeunload from working after clicking a chosen link element? – var thisOnClick;

Below is my solution to properly create the HTML onclick property, to not override or cancel the event:

            var thisOnClick;

            $.each( $(' .container a '), function(){

                thisOnClick = $(this).attr('onclick');

                if ( typeof thisOnClick == 'undefined' ) {

                    $(this).attr('onclick', 'window.onbeforeunload = null;');

                } else if ( typeof thisOnClick == 'string' && thisOnClick.indexOf('window.onbeforeunload') == -1  ) {

                $(this).attr('onclick', thisOnClick + 'window.onbeforeunload = null;');
            }

        });

Upvotes: 0

MrGrigri
MrGrigri

Reputation: 314

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.

Upvotes: 2

Mike A.
Mike A.

Reputation: 1468

don't use href's for this. A simple solution with minimal extra work:

i prefer to use a CSS class that simulates an href, obviously you will change the color and styling of this class to fit your website, but for this purposes, it's the standard blue underlined link

<style>
    .linkSimulate
    {
        cursor: pointer;
        COLOR: blue;
        text-decoration: underline;
    }
</style>

then use a simple anchor 

<a onclick = "do_save();" class ="linkSimulate">Link</a>

Upvotes: 0

Bartosz
Bartosz

Reputation: 4602

Had the same problem. Just found your question. My solution is, you need to add onclick attribute to every chosen dropdown list anchor tag and call window.onbeforeunload = null

In my case, I've put

$(".chzn-single").attr("onclick", "window.onbeforeunload = null;");

After setting up chosen library and it works fine

Upvotes: 1

VisioN
VisioN

Reputation: 145428

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>

Upvotes: 13

Tower
Tower

Reputation: 102905

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;
});

Upvotes: 2

Related Questions