Question

How can I make a link selectable, like normal text, without triggering the mouse click?

Unlinked text can be easily selected from the middle. I want to make the link selectable if the user holds down the mouse, but if it’s a single click then open the link as normal.

Answer 1

This behaviour is defined by the browser so there’s not much you can do about it. I believe some browsers do allow you to select anchor text from any point (Opera?), not just the start and end, but that’s not much use to you.

If you really want to change the default browser behaviour (which is rarely a good idea), then read on…

One potential solution could be to not use a elements, but instead use something like span. Give each span link a common class and store the intended URL:

<span class="linkSpan" data-link="http://www.example.com">This is a link</span>

Then use JavaScript (you’ve tagged the question with jQuery so I’ll use jQuery here) to redirect the user:

$(".linkSpan").click(function() {
    window.location = $(this).data("link");
});

Obviously you would need to style .linkSpan appropriately to make it appear more like an actual link.

Update (following @Madmartigan’s comment) – if you hold the mouse button down when the cursor is not over the link, then move over the link itself, you can start selecting text from any point within the link. I managed that in Chrome at least.