选择文本时禁用链接的点击事件

Question

我有一个 div 包含 link 中的文本，例如：

<a href="http://www.google.de"><div>123456890</div></a>

这个 link 如果我点击它应该会起作用。但我也希望能够 select 数字，以便我可以将它们复制到剪贴板。

我怎样才能在我网站上的所有 link 上存档它？

（如果我可以双击 selection，那将是一个很好的补充。）

Answer 1

实际上你可以 select 一个 link 如果你在它之前和之后 select 但你不能 select 部分 link 轻松编辑文本！因为 select 编辑文本是 mousedown 和 mouseup 的组合。但我为您提供了一个使用 mouseenter 事件到 select 文本的解决方案。像这样：

jQuery.fn.selectText = function(){
   var doc = document;
   var element = this[0];
   console.log(this, element);
   if (doc.body.createTextRange) {
       var range = document.body.createTextRange();
       range.moveToElementText(element);
       range.select();
   } else if (window.getSelection) {
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(element);
       selection.removeAllRanges();
       selection.addRange(range);
   }
};

$('a').mouseenter(function() {
    $('#target').selectText().focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="target" href="http://www.google.de"><div>123456890</div></a>

（将鼠标悬停在您的文字上，然后右键单击复制然后您可以单击link！）

选择文本时禁用链接的点击事件

Disable click events for links while selecting text

html

hyperlink

selection