怎么拦截页面上所有A标签的跳转

Question

怎么监听拦截页面a标签的跳转事件，拦截之后做处理在跳转

<a href="a.html"></a>
<a href="a.html"></a>
<a href="a.html"></a>
<a href="a.html"></a>
...

一个页面可能有上百个a标签，
我想统一拦截，做一些处理在跳转，可以吗

Answer 1

不太推荐上面提供的方法，因为如果有新的 a 标签加入，
就无法触发定义的事件。所以应该尝试通过事件委托的方式进行处理。

document.body.addEventListener('click', function () {
    // 兼容处理
    var target = event.target || event.srcElement;
    // 判断是否匹配目标元素
    if (target.nodeName.toLocaleLowerCase() === 'a') {
        console.log('当前点击的 a 标签: ', target);

        // 对捕获到的 a 标签进行处理，需要先禁止它的跳转行为
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            window.event.returnValue = true;
        }

        // 处理完 a 标签的内容，重新触发跳转，根据原来 a 标签页 target 来判断是否需要新窗口打开
        
        var url = target.getAttribute("href")
        if (target.getAttribute("target") === '_blank') {
            window.open(url)
        } else {
            window.location.href = url
        }
    }
});

Answer 2

$('body').on('click','a',function(event){
    event.preventDefault();
    doYourThings();
})

Answer 3

js 控制跳转？

Answer 4

选中全部 a 标签，然后拦截它们的点击事件：

const clickHandler = event => {
    // 阻止 a 标签点击事件的默认行为，即页面跳转
    event.preventDefault();
    
    // 进行你需要的处理
    // ...
};

const aTags = document.getElementsByTagName('a');

// 借用 Array.prototype.forEach 遍历处理 选到的 a 标签
Array.prototype.forEach.bind(aTags)(a => {
    a.addEventListener('click', clickHandler);
});

Answer 5

var aTags = document.getElementsByTagName("a")
for (var i = 0; i < aTags.length; i++) {
    aTags[i].onclick = function (e) {
        e.preventDefault();
    }
}

Answer 6

冒泡了解一下

Answer 7

document.querySelectorAll('a').forEach(a=>a.onclick=()=>{
    const href= a.getAttribute('href')
    console.log('我被点击了=>',href,a)
    if(href ==='/') return location.pathname = 'www.baidu.com'
    event.preventDefault();
})

Answer 8

// 是否支持navigation，不支持则走这块
if (!self.navigation) {
    document.addEventListener("click", (event) => {
        //若当前点击对象为a标签
      const link = event.target.closest("a")
    }
}
// 支持原生navigate事件
navigation.addEventListener("navigate", (event) => {
    const toUrl = new URL(event.destination.url);
 // 这里面就是劫持的所有跳转操作，不止是a链接，只要是跳转操作都能劫持到不过只有webkit内核支持，火狐不支持

})