Question

我的网站上有一个图片库，当您单击它时，它就会变成灯箱效果。

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

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");

Answer 1

我认为您想使用event.stopPropagation()：

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

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

Answer 2

在最终图像预览单击侦听器中，请确保该元素在其祖先中没有自身的预览元素，可以说您为预览元素指定了ID“ preview”

在end_image_preview中

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

   // here do what you already doing
}

点击父元素时的JS函数，但点击子元素时返回false

2 个答案: