使用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";
  }
} 

在此先感谢您的帮助.

Answer 1

在使用页面时生成链接的情况如何？对于今天更复杂的前端框架,这种情况经常发生.

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

这适用于所有链接,无论它们是否已加载页面,还是在任何时间点在前端动态生成.

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

Answer 2

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还包含AREA具有href属性的A元素- 而不仅仅是元素.