javascript - 在鼠标位置/悬停时获取链接 href 的功能(类似于 Chromium 中的复制链接位置)

Question

我正在尝试使用 JavaScript 获取当前悬停链接的 href，以便在新选项卡中打开该链接。

我可以使用以下方法获取当前页面的 href:

var myLink = window.location.href;

然后调用:

window.open(myLink);

但我想调用一些 JavaScript 函数来返回鼠标下元素的链接(就像右键单击然后选择 Copy Link Location 在 Chromium 或 Firefox 浏览器中的工作方式一样)。

编辑:好吧，我试过了:

(function(){
    var list = document.querySelectorAll( 'a' );
    var myString = "myString_Default_Value";
    for ( var i = 0; i < list.length; i ++)
      list.item(i).onmouseover = function() { myString = this.href; };
    return myString;
})();

我这样做的原因是因为我将外部匿名方法作为字符串从我的 .NET 应用程序传递(不用担心，我在我的代码中转义了双引号)然后得到一个带有 JS 结果的回调(在这种情况下，它是一个字符串结果)。

不幸的是，在我的应用程序中，我一直得到 myString 的默认值。

有什么想法吗？

Answer 1

如果您只想在新标签页中打开一些链接，只需将 target="_blank"(或 target="_new")添加到您想要的任何链接在新标签页中。

//[].forEach.call allows calling .forEach on array-like objects.
[].forEach.call(document.querySelectorAll('a'), function(link) {
    if (shouldBeInNewTab(link.href)) { link.target = "_blank"; }
});

---

您通常做的是向页面上的所有链接添加事件监听器，如下所示:

[].forEach.call(document.querySelectorAll('a'), function(link) {
    link.addEventListener('mouseover', function(event) {
        console.log(this.href); // `this` being the element triggering the event.
    });
});

但这有缺点:

• 这很浪费，如果页面上有 5000 个链接，则必须循环 5000 个项目，并在每个项目上添加一个事件监听器。
• 它不适用于新的 DOM 节点。如果您使用 JavaScript 添加链接，它不会在悬停时报告其 href。

所以我们可以通过事件委托(delegate)来解决这个问题，基本上，我在一个共同的祖先(在本例中是文档)上添加一个监听器，并过滤里面。

document.addEventListener('mouseover', function(event) {
    var hoveredEl = event.target; // The actual element which was hovered.
    if (hoveredEl.tagName !== 'A') { return; } // Ignore non links
    console.log(hoveredEl.href); // Do what we want here!
});