点击隐藏div元素功能失效问题求助

问题根源 #

1. 选择器错误：popupclose的点击事件里用了$('.boxpopup').hide()，但实际要隐藏的元素class是popup，选择器不匹配导致点击无效。
2. 缺少显示逻辑：没有实现openpopup函数，点击box无法触发popup显示。
3. 事件冒泡干扰：点击popupclose时，事件会向上冒泡到父元素box，导致popup刚隐藏就又被显示。

修正后的代码 #

HTML部分

<div class="box" onclick="openpopup()">
  点击打开弹窗
  <div class="popup" style="display: none;">
    <a class="popupclose" onclick="closepopup(event)">关闭弹窗</a>
  </div>
</div>

JS部分

// 显示弹窗
function openpopup() {
  document.querySelector(".popup").style.display = "block";
}

// 隐藏弹窗，同时阻止事件冒泡
function closepopup(event) {
  document.querySelector(".popup").style.display = "none";
  event.stopPropagation(); // 防止事件冒泡到box，避免弹窗再次显示
}

可选jQuery写法 #

如果项目里用了jQuery，也可以这样实现关闭逻辑：

function closepopup(event) {
  $(".popup").hide();
  event.stopPropagation();
}

内容的提问来源于stack exchange，提问作者Kinga