[英]JS won't catch a link if there is an image in the anchor tag
我正在使用我找到的一些代碼來設置 vanilla js 社交共享按鈕。 該代碼使鏈接在彈出窗口中打開。 如果標簽的內容只是純文本,它工作得很好,但如果我在標簽內放了一個 img,那么彈出窗口會打開,但鏈接不會傳遞給它。 這只是一個“關於:空白”窗口。
這是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>
可能是什么問題?
有問題的線路是:
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;
}
}());
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.