如果锚标记中有图像，JS 不会捕获链接答案

【问题标题】：JS won't catch a link if there is an image in the anchor tag如果锚标记中有图像，JS 不会捕获链接
【发布时间】：2021-10-30 00:16:09
【问题描述】：

我正在使用我找到的一些代码来设置 vanilla js 社交分享按钮。该代码使链接在弹出窗口中打开。如果标签的内容只是纯文本，它工作得很好，但是如果我在标签内放了一个 img，那么弹出窗口会打开，但链接不会传递给它。它只是一个“about:blank”窗口。

这是 js：

 // create social networking pop-ups
(function() {
    // link selector and pop-up window size
    var Config = {
        Link: "a.share",
        Width: 500,
        Height: 500
    };
    // add handler links
    var slink = document.querySelectorAll(Config.Link);
    for (var a = 0; a < slink.length; a++) {
        slink[a].onclick = PopupHandler;
    }
    // create popup
    function PopupHandler(e) {
        e = (e ? e : window.event);
        var t = (e.target ? e.target : e.srcElement);
        // popup position
        var
            px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2),
            py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2);
        // open popup
        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();
            if (e.preventDefault) e.preventDefault();
            e.returnValue = false;
        }
        return !!popup;
    }

}());

这是 HTML。如果我使用它，它会完美运行：

<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.example.com/blog/test.html" class="facebook share">Facebook</a>

但如果我使用它，弹出窗口会打开，但链接不会在新窗口中加载。它只是打开一个“about:blank”弹出窗口：

<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.example.com/blog/test.html" class="facebook share"><img src="/static/images/facebook-share.png" width="64px"></a>

可能是什么问题？

【问题讨论】：

标签： javascript html popup anchor

【解决方案1】：

有问题的行是：

var t = (e.target ? e.target : e.srcElement);

在第二种情况下，t 指的是img 标记，它没有href 属性，因此页面以黑色打开。

如果返回的是img 标签，您可以简单地运行检查，查找父标签a。

 // create social networking pop-ups
(function() {
    // link selector and pop-up window size
    var Config = {
        Link: "a.share",
        Width: 500,
        Height: 500
    };
    // add handler links
    var slink = document.querySelectorAll(Config.Link);
    for (var a = 0; a < slink.length; a++) {
        slink[a].onclick = PopupHandler;
    }
    // create popup
    function PopupHandler(e) {
        e = (e ? e : window.event);
        var t = (e.target ? e.target : e.srcElement);
        if (t.tagName === "IMG") {
          // look for parent "A" tag
          t = t.parentNode;
          while (t.tagName !== "A" && t.tagName !== "BODY") {
            t = t.parentNode;
          }
        }
        // popup position
        var
            px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2),
            py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2);
        // open popup
        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();
            if (e.preventDefault) e.preventDefault();
            e.returnValue = false;
        }
        return !!popup;
    }

}());

【讨论】：