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

Posted 2023-02-19

【中文标题】使用 javascript 拦截所有文档链接点击

【英文标题】：use javascript to intercept all document link clicks

【发布时间】：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";
  
 

提前感谢您的帮助。

【参考方案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 元素。