使用 JavaScript 拦截所有文档链接点击

Question

如何拦截文档中的链接点击？它必须是跨平台的。

我正在寻找这样的东西：

 // content is a div with innerHTML
var content = document.getElementById("ControlPanelContent");

content.addEventListener("click", ContentClick, false);

 function ContentClick(event) {

    if(event.href == "http://oldurl")
  {
     event.href = "http://newurl";
  }
}

原文由 Jeremy Gwa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

for (var ls = document.links, numLinks = ls.length, i=0; i<numLinks; i++){
    ls[i].href= "...torture puppies here...";
}

或者，如果您只想拦截而不是更改，请添加一个 onclick 处理程序。这将在导航到 url 之前被调用：

 var handler = function(){
    ...torment kittens here...
}
for (var ls = document.links, numLinks = ls.length, i=0; i<numLinks; i++){
    ls[i].onclick= handler;
}

Note that document.links also contains AREA elements with a href attribute - not just A elements.

原文由 Roland Bouman 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

在使用页面时生成链接的情况又如何呢？这在当今更复杂的前端框架中经常发生。

正确的解决方案可能是将单击事件侦听器放在文档上。这是因为元素上的事件会传播到它们的父元素，并且因为链接实际上是由最顶层的父元素执行的。

这将适用于所有链接，无论它们是随页面加载的，还是在任何时间点在前端动态生成的。

 function interceptClickEvent(e) {
    var href;
    var target = e.target || e.srcElement;
    if (target.tagName === 'A') {
        href = target.getAttribute('href');

        //put your logic here...
        if (true) {

           //tell the browser not to respond to the link click
           e.preventDefault();
        }
    }
}

//listen for link click events at the document level
if (document.addEventListener) {
    document.addEventListener('click', interceptClickEvent);
} else if (document.attachEvent) {
    document.attachEvent('onclick', interceptClickEvent);
}

原文由 James 发布，翻译遵循 CC BY-SA 3.0 许可协议