Javascript mouseup可以工作，但onclick不能'；T

我正在为我的作业编写JS代码。此JS用于在单击缩略图图像时添加一个元素作为弹出图像，然后在再次单击弹出窗口或页面上的任何其他位置时将其删除。但是，当我单击页面上的其他位置（而不是在弹出窗口上）时，删除弹出窗口的唯一方法是，我只能使用

on（“mouseup”）

来删除弹出窗口，而对于

on（“click”）

，它将在创建弹出窗口时发生冲突并删除弹出窗口。有人能帮忙吗

$（文档）.ready（函数（）{
$（“.img_缩略图”）。在（“单击”，函数（）{
var name=$（this.attr（“alt”），
路径=''；
var imgPop=document.createElement（“span”）；
setAttribute（“类”、“img_弹出窗口”）；
imgPop.innerHTML=路径；
$（imgPop）.insertAfter（$（this））；
$（.img_弹出窗口”）。在（“单击”，函数（）{
$（this.remove（）；
});
});
$（document）.on（“mouseup”，函数（）{
if（！$（“.img\u popup”）.is（$（this.target）和（&$（.img\u popup”）.has（$（this.target）.length==0）{
$（“.img_弹出窗口”）.remove（）；
}
});
});
.img\u弹出窗口{
宽度：100%；
位置：绝对位置；
顶部：0px；
左：0px；
保证金：自动；
z指数：1；
}
.img\u弹出式img{
边框：3件双黑；
}

贵宾犬
标准型

卷毛狗是一组正式的狗品种，标准卷毛狗，迷你卷毛狗和玩具卷毛狗。。。

我对您的功能做了一些更改，因此如果您单击弹出窗口，它不会关闭

$(document).on("mouseup", function(e) {
  if (!$(".img_popup").is($(e.target)) && $(e.target).closest('.img_popup').length == 0) {
    $(".img_popup").remove();
  }
});

演示


$（文档）.ready（函数（）{
$（.img_缩略图”）。在（“单击”，函数（）上{
var name=$（this.attr（“alt”），
路径=''；
var imgPop=document.createElement（“span”）；
setAttribute（“类”、“img_弹出窗口”）；
imgPop.innerHTML=路径；
$（imgPop）.insertAfter（$（this））；
});
$（文档）.on（“mouseup”，函数（e）{
如果（！$（“.img_popup”）是（$（e.target））&&$（e.target）。最近（'.img_popup'）。长度==0）{
$（“.img_弹出窗口”）.remove（）；
}
});
});
.img\u弹出窗口{
宽度：100%；
位置：绝对位置；
顶部：0px；
左：0px；
保证金：自动；
z指数：1；
}
.img\u弹出式img{
边框：3件双黑；
}

贵宾犬
标准型

卷毛狗是一组正式的狗品种，标准卷毛狗，迷你卷毛狗和玩具卷毛狗。。。

我对您的功能做了一些更改，因此如果您单击弹出窗口，它不会关闭

$(document).on("mouseup", function(e) {
  if (!$(".img_popup").is($(e.target)) && $(e.target).closest('.img_popup').length == 0) {
    $(".img_popup").remove();
  }
});

演示


$（文档）.ready（函数（）{
$（.img_缩略图”）。在（“单击”，函数（）上{
var name=$（this.attr（“alt”），
路径=''；
var imgPop=document.createElement（“span”）；
setAttribute（“类”、“img_弹出窗口”）；
imgPop.innerHTML=路径；
$（imgPop）.insertAfter（$（this））；
});
$（文档）.on（“mouseup”，函数（e）{
如果（！$（“.img_popup”）是（$（e.target））&&$（e.target）。最近（'.img_popup'）。长度==0）{
$（“.img_弹出窗口”）.remove（）；
}
});
});
.img\u弹出窗口{
宽度：100%；
位置：绝对位置；
顶部：0px；
左：0px；
保证金：自动；
z指数：1；
}
.img\u弹出式img{
边框：3件双黑；
}

贵宾犬
标准型

卷毛狗是一组正式的狗品种，标准卷毛狗，迷你卷毛狗和玩具卷毛狗。。。

您只需

return false;

在缩略图单击事件处理程序中-这将停止向文档单击处理程序的传播

然后，您也不需要检查您正在单击的内容（除非这里有其他规则），因为它将“在弹出窗口或页面上的任何其他位置”（包括拇指）关闭

此外，我还添加了对缩略图单击的检查，以查看缩略图是否已打开，因此不会显示两次-
返回（非false），此处将允许单击事件传播到文档单击处理程序并关闭弹出窗口


$（文档）.ready（函数（）{
$（.img_缩略图”）。在（“单击”，函数（）上{
//仅显示1
if（$（“.img_popup”）.length==1）返回；
//使用SO图像进行演示
//var name=$（this.attr（“alt”）；
//var路径=“”；
路径=”；
var imgPop=document.createElement（“span”）；
setAttribute（“类”、“img_弹出窗口”）；
imgPop.innerHTML=路径；
$（imgPop）.insertAfter（$（this））；
$（.img_弹出窗口”）。在（“单击”，函数（）{
$（this.remove（）；
});
//停止处理单击事件
返回false；
});
$（文档）。在（“单击”，函数（）上）{
$（“.img_弹出窗口”）.remove（）；
});
});
.img\u弹出窗口{
宽度：100%；
位置：绝对位置；
顶部：0px；
左：0px；
保证金：自动；
z指数：1；
}
.img\u弹出式img{
边框：3件双黑；
}

贵宾犬




标准型

卷毛狗是一组正式的狗品种，标准卷毛狗，迷你卷毛狗和玩具卷毛狗。。。

您只需

return false;

在缩略图单击事件处理程序中-这将停止向文档单击处理程序的传播

然后，您也不需要检查您正在单击的内容（除非这里有其他规则），因为它将“在弹出窗口或页面上的任何其他位置”（包括拇指）关闭

此外，我还添加了对缩略图单击的检查，以查看缩略图是否已打开，因此不会显示两次-
返回（非false），此处将允许单击事件传播到文档单击处理程序并关闭弹出窗口


$（文档）.ready（函数（）{
$（.img_缩略图”）。在（“单击”，函数（）上{
//仅显示1
if（$（“.img_popup”）.length==1）返回；
//使用SO图像进行演示
//var name=$（this.attr（“alt”）；
//var路径=“”；
路径=”；
var imgPop=docu