Html onmousedown vs href Precedence

Question

I use the following code in one of my html pages. When user clicks "Search Engines" links it opens yahoo.com on a new page and Google on current page.

I've tested this and it works (opens both urls), but is there any chance that the page will complete the window.location (redirect to a different page) without completing the href command?

Is there a rule for Precedence between the two command?

**Note: I know I can solve the problem in different ways, but I'm curious about this specific situation.

<html>
<head>
    <title></title>

<script type="text/javascript">
    function clickRedirect() {
        window.location = 'http://www.google.com';
    }
</script>
<body>

<a onmousedown="clickRedirect()" href="http://www.yahoo.com" target="_blank">Search Engines</a>
</body>
</html>

score 4 · Accepted Answer · answered Dec 02 '12 at 10:35

The mousedown event will happen first, but as you can see from the fact your code is currently working, that's not the whole story.

The question is: Once the mousedown has happened and you've set window.location, does the page get whisked away immediately (and therefore processing of the default action of the click on the a element doesn't happen), or does that default action get completed before the page is destroyed and replaced with the new page?

The answer is: I don't think that's guaranteed behavior at all (either way), and I wouldn't rely on it cross-browser. For one thing, what if the user holds down the mouse button? Since the default action of an a element isn't triggered until a click, which requires a mouseup.

Instead, I'd probably hedge my bets, in two ways:

First, I'd use click, not mousedown, for this. Users don't expect pages to swap out when they just hold the mouse down.

Second, I'd change your function:

function clickRedirect() {
    setTimeout(function() {
        window.location = "http://www.google.com";
    }, 0);
}

Now you're specifically giving the browser a chance to complete the default action of the click before you go off to another page.

You might find more information on this buried deep in the DOM events specifications:

...in that they might say something about what should happen when an event is in progress and the page is being destroyed. I didn't immediately see anything.

Thank you for the detailed information , this is just what i was afraid of - the order isn't set in stone and can go either way. i also considered using a timeout (i guess you didn't mean to use timeout with zero). — RuSh, Dec 02 '12 at 21:44
@sharru: No, the `0` is intentional, it's quite a standard technique when you need something to be asynchronous, but almost instantaneous: Using `0` sets the *minimum* timeout that the browser supports (typically between 5 and 10 ms). Short enough to be imperceptible to humans (we don't tend to notice things until 50-100ms), but using any timeout at all allows the browser to finish the event processing. (Again, I'd use `click`, not `mousedown`, so you know that the processing has begun at that point.) — T.J. Crowder, Dec 02 '12 at 22:30

Html onmousedown vs href Precedence

1 Answers1