Функция функции связывания функции Javascript с идентификатором

Question

У меня есть функция, которая вызывается через событие onclick в img. Внутри этой функции я хочу привязать одну и ту же функцию к отдельному div. Нет jQuery.

<img id="img1" onclick="toggle(this)" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mde7815d5c3b846360c29e9aa3ea9a10fH0%26pid%3D15.1&f=1" alt="Image" style="width:128px; height:auto; cursor:pointer; z-index:0;"/> 
    <p> 
    Test text 
    </p> 
    <p> 
    Test text 2 
    </p> 
    <script type="text/javascript"> 
    function toggle(doc){ 
     var mask = document.getElementById('overlay'); 
     var io = doc.tog ^= 1; 
     doc.width_org = io ? doc.style.width : doc.width_org; 
     mask.style.visibility = io ? "visible" : "hidden"; 
     doc.style.zIndex = io ? 2 : 0; 
     doc.style.width = io ? (doc.naturalWidth + "px") : doc.width_org; 
     doc.style.align = io ? "center" : "left"; 
     doc.style.vAlign = io ? "middle" : "top"; 
     doc.style.position = io ? "fixed" : "relative"; 
     doc.style.top = io ? "50%" : "0px"; 
     doc.style.left = io ? "50%" : "0px"; 
     doc.style.marginTop = io ? "-" + (doc.naturalHeight/2) + "px" : "0px"; 
     doc.style.marginLeft = io ? "-" + (doc.naturalWidth/2) + "px" : "0px"; 
    } 
    </script> 
    <div id="overlay" style="position:fixed; top:0px; left:0px; width:100%; height:100%; background:#000000; opacity:0.8; z-index:1; visibility:hidden"></div> 

Я хочу, чтобы связать функцию обратного вызова для переключения для идентификатора overlay, который проходит документ обратно через, эффективен, нажав IMG переключает его галерею эффекта, и сделать это так, нажав ДИВО наложение закрывает его, а также нажав img.

Answer 1

Просто добавьте одну строку в конце toggle (для вызова тумблер для текущего открытого изображения OnClick из DIV, а затем очистить событие OnClick) как этот

document.getElementById('overlay').onclick = function() { 
    toggle(doc); 
    this.onclick = null; 
}; 

Вот фрагмент кода для этого, нажмите запустить

<img id="img1" onclick="toggle(this)" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mde7815d5c3b846360c29e9aa3ea9a10fH0%26pid%3D15.1&f=1" alt="Image" style="width:128px; height:auto; cursor:pointer; z-index:0;"/> 
 
    <p> 
 
    Test text 
 
    </p> 
 
    <p> 
 
    Test text 2 
 
    </p> 
 
    <script type="text/javascript"> 
 
    function toggle(doc){ 
 
     var mask = document.getElementById('overlay'); 
 
     var io = doc.tog ^= 1; 
 
     doc.width_org = io ? doc.style.width : doc.width_org; 
 
     mask.style.visibility = io ? "visible" : "hidden"; 
 
     doc.style.zIndex = io ? 2 : 0; 
 
     doc.style.width = io ? (doc.naturalWidth + "px") : doc.width_org; 
 
     doc.style.align = io ? "center" : "left"; 
 
     doc.style.vAlign = io ? "middle" : "top"; 
 
     doc.style.position = io ? "fixed" : "relative"; 
 
     doc.style.top = io ? "50%" : "0px"; 
 
     doc.style.left = io ? "50%" : "0px"; 
 
     doc.style.marginTop = io ? "-" + (doc.naturalHeight/2) + "px" : "0px"; 
 
     doc.style.marginLeft = io ? "-" + (doc.naturalWidth/2) + "px" : "0px"; 
 
     document.getElementById('overlay').onclick = function() { toggle(doc); this.onclick = null; }; 
 
    } 
 
    </script> 
 
    <div id="overlay" style="position:fixed; top:0px; left:0px; width:100%; height:100%; background:#000000; opacity:0.8; z-index:1; visibility:hidden"></div>