时间戳

首页 > 解决方案 > 单击父元素时的JS函数，但单击子元素时返回false

javascript - 单击父元素时的JS函数，但单击子元素时返回false

问题描述

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

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

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

标签： javascript

解决方案

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

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

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

推荐阅读