如何在footer内链接点击时执行JavaScript并获取跳转地址？

完全可以在footer内所有链接跳转前执行指定函数，同时也能获取到跳转目标地址，推荐使用事件委托的方式实现（适配静态及后续动态添加的链接），具体实现如下：

1. 修正后的HTML代码（注意闭合footer标签） #

<footer>
    <div>
         <a href='a.aspx'>test 1</a>
         <a href='b.aspx'>test 2</a>
    </div>
    <a href='c.aspx'>test 3</a>
</footer>

2. JavaScript实现代码 #

// 获取footer元素
const footer = document.querySelector('footer');

// 给footer绑定点击事件，利用事件委托监听内部的a标签点击
footer.addEventListener('click', function(event) {
    // 确认点击的是a标签
    if (event.target.tagName === 'A') {
        // 阻止默认跳转行为，先执行自定义函数
        event.preventDefault();
        
        // 获取跳转目标地址
        const targetUrl = event.target.getAttribute('href');
        
        // 执行你的自定义函数，这里可以传入目标地址
        handleFooterLinkClick(targetUrl);
        
        // 如果执行完函数后需要正常跳转，打开下面的注释
        // window.location.href = targetUrl;
    }
});

// 自定义函数示例
function handleFooterLinkClick(url) {
    console.log('即将跳转至:', url);
    // 这里可以添加你的业务逻辑，比如埋点统计、弹窗提示等
}

3. 方案说明 #

• 事件委托的优势：不需要给每个a标签单独绑定事件，即使后续通过JS动态往footer里添加新的a标签，也能自动触发函数。
• 如果不需要兼容动态添加的链接，也可以直接遍历footer内的所有a标签绑定点击事件，但这种方式不如事件委托灵活：

// 直接绑定的方式（仅适配静态a标签）
document.querySelectorAll('footer a').forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault();
        const targetUrl = this.getAttribute('href');
        handleFooterLinkClick(targetUrl);
        // window.location.href = targetUrl;
    });
});

内容的提问来源于stack exchange，提问作者Joe Defill