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

时间:2019-06-27 09:07:35

标签: javascript

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

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

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

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

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

在end_image_preview中

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

   // here do what you already doing
}