html 拦截 a 标签跳转

最新推荐文章于 2024-04-03 10:45:42 发布

原创最新推荐文章于 2024-04-03 10:45:42 发布 · 877 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

web 专栏收录该内容

8 篇文章

订阅专栏

博客围绕前端开发展开，涉及HTML和JavaScript技术。HTML用于构建网页结构，JavaScript为网页增添交互性和动态效果，二者是前端开发的重要组成部分。

document.body.addEventListener('click', function () {
    // 兼容处理
    var target = event.target || event.srcElement;

    // 有些a 标签裹着图片之类的标签如img 这时候获取到的target是img，所以要往上遍历下
     while (target.nodeName.toLocaleLowerCase() !== 'body' &&     
         target.nodeName.toLocaleLowerCase() !== 'a') {
            target = target.parentNode || target.parentElement;
      }
    // 判断是否匹配目标元素
    if (target.nodeName.toLocaleLowerCase() === 'a') {

        // 处理完 a 标签的内容，重新触发跳转，根据原来 a 标签页 target 来判断是否需要新窗口打开
        
        var url = target.getAttribute("href")
        // 根据需要对不需要拦截的 a标签 判断处理
        if (!url ||
                url.indexOf('/') < 0 ||
                url.indexOf('javascript') > -1 ||
                url.indexOf('mailto:') > -1) return;
       // 对捕获到的 a 标签进行处理，需要先禁止它的跳转行为
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            window.event.returnValue = true;
        }
        if (target.getAttribute("target") === '_blank') {
            window.open(url)
        } else {
            window.location.href = url
        }
    }
});