Aborting Links, Cross Browser Comparisons

Avatar of Chris Coyier
Chris Coyier on

The situation: you click down on a link and you suddenly realize you didn’t want to click that link. So before you release the mouse button, you move the cursor away from the link.

This is what I am calling “aborting” a link. Years ago now, I remember seeing somebody’s demo where they found some weird combination of CSS which made it so you couldn’t abort from a link. It’s been on my to-research list for a long time, and I just started to get around to it. I wasn’t able to dig anything up, or find much written about it elsewhere. I have a feeling that it was more of a weird old browser bug, and not something easily replicate-able in the modern browsers I am using now.

This idea of aborting links is pretty interesting though. As it turns out, different browsers have pretty different ways of handling it. Let’s take a look.

Firefox 3.5.6

In Firefox, you can click anywhere inside the link and you have about a 5-pixel dragging radius before the link is aborted.

Safari 4.0.4

In Safari, if you click off the text, you can drag anywhere within the link and the link will not abort. You have to release the mouse actually outside the link for it to abort.

If you click on the text, you have about a 40-pixel radius before the link will be aborted, showing you a small link-popup.

Chrome 4.0.249.30

No matter where you click in Chrome, you have about a 40-pixel drag radius before the link is aborted.

Opera 10.10

In Opera, if you click and drag left or right, or even diagonally, the link will not abort until you leave the confines of the link. But if you drag up or down, your link will abort in about a 5 pixels. This is for clicking off the text itself.

If you click on the text, you have about a 5-pixel radius before the link will abort. Left or right dragging will actually select text, which is unusual (in other browsers you have to click outside the link and drag around to get a text selection).

IE 8.0.6

IE has a consistent 5-pixel radius to abort no matter where you click.

So?

So – nothing. It’s just kind of interesting how different browsers, even browsers that use the same rendering engine, handle aborting links differently. This is definitely something they thought about while creating the browser, and all came to different conclusions on how it should be handled.

This concept applies to anything with a click or touch surface. For example, the iPhone allows you to abort the pressing of an icon / link, but simply moving your finger away from that area.

For the record, the demo page used in this research is here.

If you wanted to be a real bastard…

It is important the links are able to be aborted. It’s just common courtesy, to allow someone to back up out of a mistake before it happens. However if you really had a good reason why you needed a link to be unabortable (or you were a real bastard), you could redirect the page with JavaScript on the mouseDown event. Here is some jQuery:

$(function() {

    $("a").mousedown(function() {
        window.location = $(this).attr("href");
    });
    
});