我的网站上有一个图片库,当您单击它时,它就会变成灯箱效果。
我希望他们能够在灯箱背景上单击预览图像并关闭预览,但是如果他们单击实际的预览图像本身,则不能。
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");
答案 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
}