Question

我有一个通过img中的onclick事件调用的函数。在该函数内部，我想将相同的函数绑定到一个单独的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>

我想绑定回调以切换传递doc的id overlay，实际上，点击img将切换其图库效果，然后单击div overlay将其关闭并点击img。

Answer 1

只需在toggle的末尾添加一行（为当前打开的图像调用切换，点击div，然后清除onclick事件），就像这样

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

此处为该代码段，点击“运行”

＆＃13;

<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>

＆＃13;

Javascript绑定函数调用id

1 个答案: