有你在真好 的个人博客
怎么拦截页面上所有A标签的跳转
阅读:2228 添加日期:2021/3/27 23:16:19 原文链接:https://www.toutiao.com/item/6924575248914432524/

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

document.body.addEventListener('click', function (event) {
    // 兼容处理
    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
        }
    }
});

方法真实有效。可以对页面全局a标签做统一处理。

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

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号