使用JavaScript/jQuery点击背景无法关闭弹窗问题求助

代码问题及修正方案 #

你的代码存在以下几个可优化/修复的点：

• 语法错误：clicklistener 函数的闭合大括号被写在了注释末尾，没有正确闭合函数，会直接报语法错误无法运行
• 元素查找逻辑不严谨：直接遍历父级下所有span进行判断，当父级内存在其他无关span时会出现误判、误删的情况
• 字符串拼接生成HTML存在XSS注入风险，若图片地址包含特殊字符会导致代码异常
• 元素插入位置和查找位置逻辑不匹配：你用 after 把span插入到当前缩略图的同级位置，判断时却查找父级下的所有子span，当有多个缩略图同级时会互相干扰

修正后的完整代码如下：

$(document).ready(clicklistener);
// 页面加载完成后绑定点击监听
function clicklistener() {
  $(".image-thumbnail").click(popup);
  // 给所有缩略图绑定点击弹窗事件
} 

function popup() {
  const $this = $(this);
  const srcname = $this.attr("src");
  // 获取当前点击的缩略图源地址
  const newfile = srcname.replace("small", "large");
  // 替换为大图地址
  
  // 直接查找当前缩略图后紧跟的弹窗元素，避免影响其他元素
  const $popup = $this.next("span").children("img.image-popup");
  if ($popup.length) {
    // 如果弹窗已存在就移除
    $this.next("span").remove();
  } else {
    // 用jQuery创建元素避免拼接HTML的安全风险
    const $img = $("<img>", {
      class: "image-popup",
      src: newfile
    });
    const $span = $("<span>").append($img);
    $this.after($span);
  }
}

如果运行代码还有其他异常，可以补充对应的HTML结构信息进一步排查。

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