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

Question

如果您有一段普通文本，您可以单击文本内的任意位置并拖动鼠标以突出显示它。但是，如果文本位于 anchor /链接标签内，则不允许您单击和拖动——链接会捕获鼠标并阻止它发生。

要了解我的意思，请在此页面上找到一个文本链接并尝试在其中单击并拖动以选择它。它不会让您 -- 您必须在链接外部单击并在其周围拖动。

您需要在 JavaScript/JQuery 中做什么才能暂时禁用足够长的链接，以便您可以拖动并突出显示它？

我不能从链接外部开始的原因是因为段落中的每个词都在一个超链接内——它是一个视频转录本，每个链接都同步到视频中的一个片段。

Answer 1

我的第一个想法是做这样的事情:

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

但是，可能有更好的方法来做到这一点。上面的代码将所有的a元素转换为span元素，保持href属性值，然后使span类为“link”的元素作为链接。您可以设置 span 元素的样式，使其看起来像您页面上当前的 a 元素。

这是一个 example上述的行动。