Javascript 如果在弹出窗口外单击，则关闭弹出窗口

我有这个代码显示一个按钮谁显示一个弹出窗口，我希望用户能够关闭它的外部点击弹出窗口时，它是打开的

因此，我想在事件列表器附近指定一个方法，它检测到类“.popup”的外部单击，现在它只是一个警报

问题是，当我点击按钮时，它已经开始发出警报，即使弹出窗口还没有打开，我希望事件列表器在弹出窗口打开后开始工作，而不是之前

任何关于删除重复代码的建议也将不胜感激

多谢各位

/*最后清理“popup1”中的URL*/ history.replaceStatenull，null“”； /*在单击前从DOM中删除弹出窗口，以防用户刷新*/ 让id_popup=document.querySelector'popup1'； 让popup=id\u popup.parentNode popup.removeChildid\u弹出窗口； /*打开弹出窗口*/ 功能开放{ popup.appendChildid\u弹出窗口； 让class_popup=document.querySelector.popup'； window.addEventListener'click'，函数e{ if！class_popup.containse.target{ 警告“您正在弹出窗口外单击！” } }; } /*关闭弹出窗口*/ 功能关闭{ popup.removeChildid\u弹出窗口； history.replaceStatenull，null“”； } .按钮{ 字号：1em； 填充：10px； 颜色：000； 边框：2个实心06D85F； 边界半径：20px/50px； 文字装饰：无； 光标：指针； 过渡：所有0.3秒放松； } .按钮：悬停{ 背景：06D85F； } .覆盖{ 位置：固定； 排名：0； 底部：0； 左：0； 右：0； 背景：rgba0,0,0,0.7； 过渡：不透明度500ms； 可见性：隐藏； 不透明度：0； } .覆盖：目标{ 能见度：可见； 不透明度：1； } .弹出窗口{ 利润率：70像素自动； 填充：20px； 背景：fff； 边界半径：5px； 宽度：60%； 位置：相对位置； 过渡：所有5s易于输入输出； } .弹出窗口h2{ 边际上限：0； 颜色：333； 字体系列：Tahoma，Arial，无衬线； } .弹出.关闭{ 位置：绝对位置； 顶部：20px； 右：30px； 过渡：所有200ms； 字体大小：30px； 字体大小：粗体； 文字装饰：无； 颜色：333； } .弹出.关闭：悬停{ 颜色：06D85F； } .popup.content{ 最高高度：30%； 溢出：自动； } @媒体屏幕和最大宽度：700px{ .盒子{ 宽度：70%； } .弹出窗口{ 宽度：70%； } } 你好 标题 文本 请尝试以下操作：

let allElems = document.querySelectorAll("body > div:not(#popup1)"); // Special query selector to get everything except .popup and its children

Array.from(allElems).forEach(elem => // Convert to iterable (with Array.from) and loop through all elements selected
  elem.addEventListener('click', function (e) { // Give them all the click event listener.
    alert('You\'re clicking outside the popup !') 
  });
}

---

问题主要在于你的if语句，因为.contains有点把事情搞砸了。另一种方法是将两个元素都转换为字符串，并以这种方式进行比较，但这种方法更好，速度也更快，因为我们不需要检查每次单击是否在框中。

检查您是否在弹出窗口之外的其他元素中单击，也请确保停止事件propogation@ImmortalDude它首先与打开的方法有关，因为在单击之前它甚至不在DOM中，事件传播处于“关闭”状态，对吗？使用事件监听器并将它们绑定到文档就绪上，尽可能避免onclick，我的意思是使用event.stopPropogation来阻止单击在Dom中冒泡tree@ImmortalDude“非常感谢，它现在起作用了，”我补充道；在open方法上，现在它工作正常。感谢您的回答，但现在即使您使用此代码在弹出窗口中单击，它也会显示警报。@aliouawalid立即尝试。@aliouawalid是否像您在评论中所说的那样将其与event.stopPropogation一起使用？看看它是否有效。使用查询选择器仍然比您当前的代码更稳定。不，我没有，我也会试用您的代码，谢谢。