Question

请为我打开以下JavaScript打开一个弹出窗口，请：

function openPopup(e) {
    e.preventDefault();
    window.open(this.href, "popupWindow", "width=600,height=600,scrollbars=yes");
}
var el = document.querySelector(".bbc-popup");
el.addEventListener("click", openPopup);

这是一个正在运作的JSFiddle：

http://jsfiddle.net/dvadcgps/1/

但是，当我将其包含在我的网页上时，代码无效，链接会在当前标签中打开。我依赖的仅外部JavaScript资源是jQuery（1.11.3）和Bootstrap 3，这些都包含在上面的小提琴中，没有效果。

这段代码还有什么其他原因可以解决？

以下是页面的完整HTML代码，其中包含所有外部资源，供您查看它是如何停止工作的......应该打开弹出窗口的链接位于查看主席＆＃39后面;构建按钮：

http://jsfiddle.net/e60y004n/1/

Answer 1

关闭Brian Ray的评论，我必须确保将事件监听器添加到每个元素，因为我当前的代码只是将其添加到第一个元素。

首先，我将所有想要定位的元素添加到数组中。

var chairPopup = document.getElementsByClassName("chair-popup");

然后循环遍历该数组中的每个元素，向每个元素添加Event Listener：

for (var i = 0; i < chairPopup.length; i++) {
    chairPopup[i].addEventListener("click", openPopup);
}

使用function()的完整代码如下所示：

var chairPopup = document.getElementsByClassName("chair-popup");

function openPopup(e) {
    e.preventDefault();
    window.open(this.href, "popupWindow", "width=300,height=1000,scrollbars=yes");
}
for (var i = 0; i < chairPopup.length; i++) {
    chairPopup[i].addEventListener("click", openPopup);
}

在一位已被其作者删除的答案中，他们提到需要在popupWindow函数中将_blank更改为window.open()。我可以确认这是必需的，否则每个链接都会在相同的弹出窗口中打开。

window.open(this.href, "_blank", "width=300,height=1000,scrollbars=yes");

外部依赖与preventDefault（）冲突？

1 个答案: