Question

我有div而且它与绝对位置div的链接。我需要在链接上捕获点击事件并获得＆＃34; href＆＃34;属性。我不想只使用纯JavaScript的任何库。有可能吗？

我尝试了类似这样的东西，但它只捕获链接之外的div。

window.addEventListener('load', function ()
{
    document.addEventListener('click', $openExternalLink, false);
});


function $openExternalLink(e) {
    alert(e.target.tagName);
}

HTML：

<div>Text</div>
<a href="..."><div style="position: absolute; left: ..., top: ..."></div></a>

也许这种结构很糟糕，不幸的是我无法影响它。

谢谢

Answer 1

document.onload = function() {
    var myLink = document.querySelector("a");
    myLink.addEventListener("click", function() {
        var href = this.href;
    })
}

只需向锚点添加一个事件监听器，然后使用href（或this.getAttribute（“href”））获取其this.href属性

我会假设你对JavaScript很新？如果是这样，一定要去看看http://CodeCademy.com/

另外，我只是想知道，如果你想处理一个函数的链接（就像你看到的那样），那就做这样的事情：

document.onload = function() {
    var myLink = document.querySelector("a");
    myLink.addEventListener("click", function(e) {
        e.preventDefault(); // Makes the event prevent the default link behaviour
        var href = this.href;
        externalLink(href);
    })
}
externalLink(href) {
    // Do something with your link.
    // perhaps, window.location = href (or whatever)
}

要用于页面上的所有链接（根据您的评论），请执行以下操作：

document.onload = function() {
    var links = document.querySelectorAll("a");
    var i = 0, count = links.length;
    for (i; i < count; i++) {
        links[i].addEventListener("click", function(e) {
            e.preventDefault();
            externalLink(this.href);
        })
    }
}
externalLink(href) {
    // Do something with your link.
    // perhaps, window.location = href (or whatever)
}

使用querySelectorAll来定位文档中的所有锚标记，然后通过它们循环，为每个锚标记添加一个事件监听器。请记住，如果您还想支持IE8，这个脚本需要一些调整。（使用attachEvent("onclick"...代替addEventListener，并在活动中将this替换为links[i]

在绝对位置元素上捕获单击事件

1 个答案: