removeChildはimgの外でのみ動作します

Question

クリックしたときにオーバーレイを削除したいのですが、画像は表示されません。 div（オーバーレイ）をクリックしたときにオーバーレイが消えてしまいましたが、写真をクリックしても表示されませんでした。コンソールにエラーが表示されませんでした。

(function(){ 
 
    
 
    
 

 
    window.onclick=function (e){ 
 
    
 
    var hit=e.target.tagName; 
 
    
 

 
    if(hit=='IMG'){ 
 
    
 
    overlay=document.createElement('div'); 
 
    overlay.id='photo'; 
 
    document.body.appendChild(overlay); 
 
    overlay.style.position='absolute'; 
 
    overlay.style.top=0; 
 
    overlay.style.background='rgba(0,0,0,0.53)'; 
 
    overlay.style.cursor='pointer'; 
 
    overlay.style.width=window.innerWidth+"px"; 
 
    overlay.style.height=window.innerHeight+"px"; 
 
    
 
    
 
    photo=e.target.src; 
 
    popeikona=document.createElement('IMG'); 
 
    popeikona.src=photo; 
 
    overlay.appendChild(popeikona); 
 
    popeikona.style.width='550px'; 
 
    popeikona.style.height='380px'; 
 
    
 
    popeikona.style.margin='15%'; 
 
    
 
    
 
    
 
    }; 
 
    
 
     
 
     overlay.addEventListener('click',function(){ 
 
     
 
     overlay.parentElement.removeChild(overlay); 
 
     
 
    }); 
 
     
 

 
    
 
    window.onscroll=function(){ 
 
      
 
     if(overlay){ 
 
     overlay.style.top=window.pageYOffset+"px"; 
 
     overlay.style.left=window.pageXOffset+"px"; 
 
    } 
 
    }; 
 
     
 
    console.log(overlay); 
 
} 
 

 

 

 
}());

任意の提案ですか？

Answer 1

新しいオーバーレイ要素を作成するときに、それにアタッチされているリスナーはありません。試してみてください：私はオーバーレイをクリックして、このプロセスを繰り返しdisappear.Iと私は、オーバーレイ内のimgでクリックされたときにオーバーレイが消えなかったright.Then

window.onclick=function (e){ 

     var hit=e.target.tagName; 


     if(hit=='IMG'){ 

     overlay=document.createElement('div'); 
     overlay.id='photo'; 
     document.body.appendChild(overlay); 
     overlay.style.position='absolute'; 
     overlay.style.top=0; 
     overlay.style.background='rgba(0,0,0,0.53)'; 
     overlay.style.cursor='pointer'; 
     overlay.style.width=window.innerWidth+"px"; 
     overlay.style.height=window.innerHeight+"px"; 

     overlay.addEventListener('click',function(){   
      overlay.parentElement.removeChild(overlay); 
     }   

     photo=e.target.src; 
     popeikona=document.createElement('IMG'); 
     popeikona.src=photo; 
     overlay.appendChild(popeikona); 
     popeikona.style.width='550px'; 
     popeikona.style.height='380px'; 

     popeikona.style.margin='15%';  

     } 
};