JS won't catch a link if there is an image in the anchor tag-CodePudding

I'm using some code I found for setting vanilla js social sharing buttons. The code makes the links open in a pop-up window. It works perfectly fine if the content of the tag is just plain text, but if I put an img inside the tag, then the pop-up window opens, but the link is not passed to it. It's just an "about:blank" window.

Here's the 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;
    }

}());

And here's the HTML. If I use this, it works perfectly:

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

But if I use this, the pop-up opens, but the link doesn't load in the new window. It just opens an "about:blank" pop-up window:

<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>

What may be the problem?

CodePudding user response：

The problematic line is:

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

In the second case t is referring to the img tag and it has no href attribute so the page opens with black.

You can simply run a check in case if it's an img tag returned, look for the parent a tag.

 // 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;
    }

}());