Vanilla JS社交分享弹窗按钮异常：锚标签内含图片时无法加载目标链接

嘿，这个问题其实很常见——核心原因是点击事件的目标元素不是你以为的<a>标签！

当你点击纯文本的<a>时，e.target直接指向这个<a>元素，自然能正确读取它的href属性；但当你点的是<a>里面的<img>时，e.target会指向这个<img>标签，而<img>根本没有href属性，所以t.href的值是undefined，传给window.open后就只能打开空白的about:blank页面了。

只需要修改PopupHandler函数里获取目标元素的逻辑，确保无论点击的是<a>本身还是它的子元素，最终都能拿到<a>的href。这里有三种简单靠谱的修改方式：

方案1：用e.currentTarget（最推荐） #

currentTarget是事件绑定的那个元素（也就是带share类的<a>），和实际点击的子元素无关，直接用它就不会错：

function PopupHandler(e) {
    e = e || window.event;
    // 替换原来的target获取逻辑，直接用currentTarget
    var t = e.currentTarget;
    // 下面的弹窗计算和打开逻辑完全不变
    var px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2),
        py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2);
    var popup = window.open(t.href, "social", `width=${Config.Width},height=${Config.Height},left=${px},top=${py},location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1`);
    if (popup) {
        popup.focus();
        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    }
    return !!popup;
}

方案2：从点击元素向上找<a> #

如果需要兼容非常老的浏览器（其实现在没必要了），可以写个小逻辑从点击的元素往上遍历，直到找到<a>标签：

function PopupHandler(e) {
    e = e || window.event;
    var t = e.target || e.srcElement;
    // 向上遍历父节点，直到找到<a>
    while (t && t.tagName !== 'A') {
        t = t.parentNode;
    }
    // 没找到的话直接返回，避免报错
    if (!t) return;
    // 后续逻辑不变...
}

方案3：用this #

因为事件是绑定在<a>上的，所以this会直接指向这个<a>元素，写法也很简洁：

function PopupHandler(e) {
    e = e || window.event;
    var t = this;
    // 后续逻辑不变...
}

随便选一种都能解决你的问题，方案1和3最简洁，优先推荐~

内容的提问来源于stack exchange，提问作者Valentin Mars