javascript - 使超链接可选择

Question

如果您使用 Firefox 或 Chrome 浏览网页，您可以选择超链接中的文本，一个带有 <a> 的元素标签，按住右 alt 键。

在我的应用程序中，我想使用 javascript 实现这一点，而不是通过按住某个按钮，而是默认情况下。如果用户双击，我将重定向到 url，否则用户将能够像选择纯文本一样选择内容。

我尝试的第一件事是替换所有 <a>带有 <span> 的元素要素并实现相关事件。这提供了我想要的功能，但在我保持所有属性(类、id)相同的情况下甚至会严重扭曲外观。好像有标签 <a>我正在处理的页面的特定 CSS。

现在我正在尝试通过保留标记名来实现这一点。我目前的代码如下:

var linkElems = document.getElementsByTagName('a');

for (var i = linkElems.length - 1; i >= 0; i--) {
    linkElems[i].ondblclick = function () {
           //redirect to url
        };

    linkElems[i].setAttribute("href", "#");
    linkElems[i].onclick = function () { return false; };       
}

在这段代码之后，链接不会使页面重定向到相应的 url，但是当我尝试选择文本时，它只是拖动了一些包含 url 的框。为了防止这种情况，我写了这行代码:

document.body.ondragstart = function(){return false;}

现在，我阻止了拖动，但仍然无法选择文本。我想知道有没有办法解决这个问题。

Answer 1

看这个。

我使用了数据属性，没有定义href属性。

您可以在MDN 上找到有关data-* 属性的更多信息。

$(function(){
    $(".aLink").dblclick(function(){
    var link = $(this).attr("data-href");
    window.location.href = link;
  });
});

a {
  color: blue;
  text-decoration: underline;
}

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

<a data-href="https://example.com" class ="aLink">Link 1</a> <br><br>
<a data-href="https://example.com/something" class ="aLink">Likn 2</a>