使用 javascript 拦截所有文档链接点击答案

【问题标题】：use javascript to intercept all document link clicks使用 javascript 拦截所有文档链接点击
【发布时间】：2011-01-09 08:05:59
【问题描述】：

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

我正在寻找这样的东西：

// 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";
  }
}

提前感谢您的帮助。

【问题讨论】：

标签： html internet-explorer firefox javascript-events

【解决方案1】：

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

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

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

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);
}

【讨论】：

这是一个更好的答案，因为它创建的事件处理程序更少，并且涵盖了动态生成链接的情况，例如在我们正在开发的 CMS 中。
请注意，<a> 可以包裹其他元素，在这种情况下，事件目标实际上不是A。另请注意，如果用户使用<TAB> 聚焦链接，然后按<ENTER>，这将不起作用。如果你想拦截所有改变页面的东西，你需要替换所有的 a-tags 和 form-tags，并使用 MutationObserver 检测动态元素。
对于嵌套元素，例如<a> 内部的<span>，您可以使用.closest()：if (target.tagName !== 'a') target = target.closest('a');。

【解决方案2】：

我刚刚发现了这一点，它可能会对某些人有所帮助。除了拦截之外，如果您想禁止链接加载另一个页面或重新加载当前页面。只需将 href 设置为“#”（如内部页面引用前缀）。现在您可以使用该链接在同一页面上调用函数。

【讨论】：

更新：这不是最好的方法。使用href="javascript:void(0)" 通常会更好，因为它不会强制页面重新加载。 more here
请注意，这两种方式都会阻止用户在链接上使用右键单击操作（在新选项卡中打开等）

【解决方案3】：

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;
}

请注意，document.links 还包含具有 href 属性的 AREA 元素 - 而不仅仅是 A 元素。

【讨论】：