如何单击超链接内的文本以便拖动并突出显示它？

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.

Answer 1

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.

Answer 2

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.