How do you click text that's inside a hyperlink so you can drag and highlight it?

Question

If you have a paragraph of normal text, you can click anywhere inside the text and drag your mouse to highlight it. However, if the text is inside an anchor/link tag, it won't allow you to click and drag -- the link catches the mouse and prevents it from happening.

To see what I mean, find a text link on this page and try to click inside it and drag to select it. It won't let you -- you'll have to click outside the link and drag around it.

What do you need to do in JavaScript/JQuery to temporarily disable the link long enough for you to drag and highlight it?

The reason I can't just start outside the link is because every word in the paragraph is within a hyperlink -- it's a video transcript and each link is synced to a segment in the video.

@Julien thanks - never knew this. I always start outside the link — mplungjan, Aug 15 '11 at 12:29

score 2 · Accepted Answer · answered Aug 15 '11 at 12:02

2

My first thought was to do something like this:

$("a").each(function() {
   $(this).replaceWith("<span class='link' data-href='" + $(this).attr("href") + "'>" + $(this).text() + "</span>"); 
});
$(".link").click(function() {
   window.location = $(this).data("href"); 
});

However, there may be a much better way of doing this. The code above converts all a elements into span elements, keeping the href attribute value, and then makes the span elements with class "link" function as links. You could style the span elements to look like a elements currently do on your page.

Here's an example of the above in action.

answered Aug 15 '11 at 12:02

James Allardice

164,175
21
332
312

Yeah, that works. I guess I could pre-process all of the transcripts and transform the anchors into span tags and load them like that into the database. But now I'm curious to figure out what part of the link controls that mechanism to see if it can be done while keeping it as a link :) – espeed Aug 15 '11 at 12:36
@espeed - Yes, I'm curious about that too. All my experiments apart from the code in my answer have failed though... if I discover anything, I'll be sure to update the answer. – James Allardice Aug 15 '11 at 12:39

score 0 · Answer 2 · edited May 23 '17 at 11:55

You could try this solution, loading the original text into variables and then restore them.

But that seems too messy. Sometimes a simpler solution is better.

Why not have two paragraphs and set visibiltiy='hidden' when the user clicks on a button to hide the paragraph with links and show the paragraph without links?

Page weight doesn't seem to be an issue, since you're anyway loading video.

How do you click text that's inside a hyperlink so you can drag and highlight it?

2 Answers2