Javascript 单击父元素时返回JS函数，单击子元素时返回false

我在我的网站上有一个图像库，当你点击它时，它会打开一个类似灯箱的效果

我希望他们能够在lightbox背景上单击关闭预览图像并关闭预览，但如果他们单击实际的预览图像本身，则不能关闭预览

function get_image_preview(){
    var lightbox = document.getElementById("lightbox");
    var image_src = document.getElementById("gallery_image").src;
    lightbox.style.display = "block";
    lightbox.setAttribute("onclick", "end_image_preview()");

    var new_image = document.createElement("img");
    new_image.setAttribute("id", "preview_image");
    new_image.setAttribute("src", image_src);
    new_image.setAttribute("onclick", "return false");
    lightbox.appendChild(new_image);
}
function end_image_preview(){
    var lightbox = document.getElementById("lightbox");
    lightbox.style.display = "none";
    lightbox.innerHTML = "";
}

所以基本上这一行：

lightbox.setAttribute("onclick", "end_image_preview()");

执行它应该执行的操作并关闭预览

但是，预览是此功能的子功能，我希望他们能够在不结束预览的情况下单击图像，因此我尝试了以下方法：

new_image.setAttribute("onclick", "return false");

---

在最终图像预览中，单击listener，确保元素的祖先中没有它自己的预览元素，假设您为预览元素指定了preview id

最终图像预览

function end_image_preview(e) {
   if (e.closest('#preview')) {
     return
   }

   // here do what you already doing
}

---

我想您可能不想使用：

---

您能制作一个包含所有代码css/html/js的JSFIDLE吗？THX这不应该通过在图像上添加额外的点击处理程序来完成，而是通过检查您添加的第一个事件目标中的原始事件目标。如果目标是图像元素-什么也不做。@stefanz也有堆栈片段。为什么离开网站去看一个例子？

function new_image_click(e) {
    e.stopPropagation();
}

new_image.setAttribute("onclick", "new_image_click(event)");