Javascript jQuery highlight插件取消了文本选择，使得复制变得不可能，同时也使得链接不可点击

我正在使用来选择网页上的一些文本

我已经用鼠标事件连接了选择和取消选择：

document.addEventListener('mouseup', doSelect);
document.addEventListener('mousedown', doDeselect);

功能包括：

function doSelect() {
    var selectionRange = window.getSelection();
    var selection = selectionRange.toString();
    if (selection.trim().length > 0) {
        $('body').highlight(selection);
    }
}

function doDeselect() {
    $('body').unhighlight();
}

简单明了。该库搜索所选文本，并将每次出现的文本包装在

中，使文本突出显示

它工作得很好，但我对它的行为有两个问题

问题是，一旦应用

span

元素，我就无法单击超链接（找到/选择的超链接），它们不会对单击做出反应（我必须先取消选择文本）

添加

span

元素后，原始选择会以某种方式丢失，即我无法复制使用CTRL+C选择的内容

这些问题可以从中看出

为什么会发生这种情况？

代码 工作演示可在以下位置获得：

JavaScript

var$body=$（'body'）；
var$copyrea=$（“#copyrea”）；
文件。添加的列表器（'mouseup'，doSelect）；
文件。添加的文件列表器（'mousedown'，doDeselect）；
文件。添加的文本列表器（“按键向下”，按键处理程序）；
功能按键处理程序（e）{
如果（e.ctrlKey&&e.keyCode==67）{
$copyArea.focus（）.select（）；
}
}
函数doSelect（）{
var selectionRange=window.getSelection（）；
var selection=selectionRange.toString（）；
如果（selection.trim（）.length>0）{
$copyrea.val（选择）；
$body.highlight（可选）；
}   
}
功能多德选择（e）{
var elem=$（e.target）.parents（'a'）；
如果（元素长度==0）{
$copyrea.val（“”）；
$body.unhighlight（）；
}
}

HTML

要选择的示例文本。

要选择的示例文本。

要选择的示例文本。

google.com

CSS

。突出显示{
背景色：#FFFF88；
}
#复印区{
位置：固定；
顶部：-999px；
高度：0px；
}

第1部分-单击选定内容 据推测，单击高亮显示的链接不起作用的原因是禁用高亮显示的过程首先启动并取消单击

为了绕过这个问题，我们实现了一个条件，检查

mousedown

事件的目标元素是否有一个

a

元素作为祖先。如果这是真的，我们就不执行

$body.unhighlight（），允许单击通过并打开链接

功能多德选择（e）{
var elem=$（e.target）.parents（'a'）；
如果（元素长度==0）{
$copyrea.val（“”）；
$body.unhighlight（）；
}
}

第2部分-复制选择
同样，选择丢失的原因可能是文档被高亮显示修改，高亮显示将元素引入DOM

我的第一个想法是在修改完成后重新应用选择。这变得很烦人，我走了另一个方向，这让我偶然发现：


这提供了一个简单而有效的想法：使用一个可以包含可选文本的隐藏元素

因此，要允许复制我们在丢失原始选择的情况下突出显示的选定文本，请执行以下操作：

我们在文档中添加了一个隐藏的
textarea
元素



我们得到了对该元素的引用

var$copyrea=$（“#copyrea”）；

我们为
keydown
事件添加了一个事件处理程序

document.addEventListener（'keydown'，keyPressHandler）；

我们添加事件处理程序

功能按键处理程序（e）{
如果（e.ctrlKey&&e.keyCode==67）{
$copyArea.focus（）.select（）；
}
}

我们修改
doSelect（）
以添加一些逻辑，将选择设置为
textarea
元素的值，形式为
$copyrea.val（选择）

函数doSelect（）{
var selectionRange=window.getSelection（）；
var selection=selectionRange.toString（）；
如果（selection.trim（）.length>0）{
$copyrea.val（选择）；
$body.highlight（可选）；
}   
}

处理程序做什么？它捕获CTRL+C组合，并将焦点放在隐藏文本区域中的文本上，该文本最终被我们刚刚发出的键盘命令复制。
谢谢-这确实是朝着正确方向迈出的一步（在这一点上，事情确实可行）。与链接的技巧-工程完美。至于选择-它不起作用：（我尝试过复制/选择，但只有30%的尝试成功..自己尝试一下-双击选择，实际选择鼠标等@user3073853这可能与浏览器有关，Firefox从未错过过一个副本。这可能只是时间问题。我会想一些事情。谢谢-我对Chrome最感兴趣，所以它很有用。）它更容易被发现issues@user3073853在Firefox、Chrome、Opera和IE中进行测试。只需收听
keydown
并使用
keyCode
。谢谢-现在似乎确实可以使用了！（一旦系统允许，将+50）