Javascript 切换隐藏/显示div在按钮上工作，但在链接上不工作？

我希望在单击链接时能够显示和隐藏某个div，但我的代码只有在使用按钮时才能工作。为什么会发生这种情况？我如何修复它

这是我的密码：

.popup{
位置：相对位置；
显示：内联块；
}
.弹出内容{
显示：无；
位置：绝对位置；
宽度：1000px；
}
.表演{
显示：块；
}

从按钮弹出
Lorem ipsum dolor sit amet，奉献精英。Voluptatibus类voluptas阻碍了它。罪过？
/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数showPopup（）{
event.preventDefault（）；
document.getElementById（“myPopup”）.classList.toggle（“show”）；
返回false；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
如果（！event.target.matches（'.thepopp'））{
var dropdowns=document.getElementsByClassName（“弹出内容”）；
var i；
对于（i=0；i

弹出窗口正常打开，但您关闭弹出窗口的功能导致了问题

将侦听器附加到整个窗口的“onclick”函数，然后继续关闭弹出窗口-除非事件目标与“.btnPopup”匹配，即单击了按钮

所以现在发生的是：

单击按钮，其“onclick”函数显示弹出窗口，窗口的“onclick”函数运行，但不执行任何操作，因为事件目标与.btnPopup匹配

单击链接，其“onclick”功能显示弹出窗口，窗口的“onclick”功能运行，当事件标记不匹配时。btnPopup立即关闭弹出窗口

您可以轻松地修复它，例如，向按钮和链接添加另一个类，并在窗口中使用该类。单击listener可检查是否单击“某物”打开弹出窗口：

<button onclick="showPopup()" class="btnPopup Popup">POPUP FROM BUTTON</button>
<a class="linkStyle Popup" onclick="showPopup()" href="#">POPUP FROM LINK</a>
...
window.onclick = function(event) {
    if (!event.target.matches('.Popup')) {
        //Proceed with closing the popup

从按钮弹出
...
window.onclick=函数（事件）{
如果（！event.target.matches（'.Popup'））{
//继续关闭弹出窗口

弹出窗口正常打开，但您关闭弹出窗口的功能导致了问题

将侦听器附加到整个窗口的“onclick”函数，然后继续关闭弹出窗口-除非事件目标与“.btnPopup”匹配，即单击了按钮

所以现在发生的是：

单击按钮，其“onclick”函数显示弹出窗口，窗口的“onclick”函数运行，但不执行任何操作，因为事件目标与.btnPopup匹配

单击链接，其“onclick”功能显示弹出窗口，窗口的“onclick”功能运行，当事件标记不匹配时。btnPopup立即关闭弹出窗口

您可以轻松地修复它，例如，向按钮和链接添加另一个类，并在窗口中使用该类。单击listener可检查是否单击“某物”打开弹出窗口：

<button onclick="showPopup()" class="btnPopup Popup">POPUP FROM BUTTON</button>
<a class="linkStyle Popup" onclick="showPopup()" href="#">POPUP FROM LINK</a>
...
window.onclick = function(event) {
    if (!event.target.matches('.Popup')) {
        //Proceed with closing the popup

从按钮弹出
...
window.onclick=函数（事件）{
如果（！event.target.matches（'.Popup'））{
//继续关闭弹出窗口

仅更改如下代码：

 window.onclick = function(event) {
        if (!event.target.matches('.btnPopup')&& !event.target.matches('.linkStyle')) {

---

仅更改如下代码：

 window.onclick = function(event) {
        if (!event.target.matches('.btnPopup')&& !event.target.matches('.linkStyle')) {

---

是的，就是这样！我刚刚添加了这个验证，它成功了：

if（！event.target.matches（'.btnPopup'）&&&！event.target.matches（'.linkStyle'））

谢谢！不客气！也考虑过扩展验证。这取决于您想做什么。是否有多种方法打开弹出窗口（即许多不同的类要检查）我会去添加一个专用的类。if语句可能会很长，真的混淆否则。我会考虑这个。这是非常好的解释和解决方案-我用它，并更新了我的答案。再次感谢。现在我发现这只适用于Chrome，而不适用于Mozilla。你知道问题的原因吗？检查Firefox控制台中的错误消息！在

showPopup（）

中，你有

event.preventDefault（）

，但是

事件在该函数的上下文中是未知的。请尝试取消对该行的注释。是的，就是这样！我刚刚添加了此验证，它成功了：
如果（！event.target.matches（'.btnPopup'）&&！event.target.matches（'.linkStyle'））
谢谢！不客气！也考虑过扩展验证。这取决于您想做什么。是否有多种方式打开弹出窗口（即检查许多不同的类）我想添加一个专用的类。if语句可能会很长，真的很混乱。好吧，我会考虑这个。这是非常好的解释和解决方案。我用过它并更新了我的答案。再次感谢。现在我发现这只在Chrome中使用，但在Mozilla中不适用。你知道什么会引起Pro吗？错误？检查Firefox控制台中的错误消息！在
showPopup（）
中，您有
event.preventDefault（）
，但是
event
在该函数的上下文中是未知的。请尝试取消注释该行。