Question

更清楚当您运行代码时----单击页面中的“显示”，div打开时带有灰色背景，另一个内部div带有绿色背景--- onclick on grey background div需要关闭如果我们点击绿色div它不应该关闭请帮助我提前谢谢。

我有一个文本'show'onclick on show it open a up div，设置为display = none，这个div设置为overflow=hidden。在div中，我有另一个div与物质。这工作正常，但问题是主要div的onclick设置为display = none在其区域中单击时必须关闭。

代码：

<html>
<head></head>
<script language="javascript"> 
function toggle(tId) {
 var ele = document.getElementById(tId);
       ele.style.display = "block";
}
function cancelToggle(id,e)

      {         var target = (e && e.target) || (event && event.srcElement);
        var obj = document.getElementById('toggleText');
        if(target!=obj){obj.style.display='none'}
      }
</script>
<body>

 <a id="displayText" href="javascript:toggle('toggleText');">show</a>

 <div id="toggleText" style="display: none; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);  
            bottom: 0; height: 100%; left: 0; overflow: hidden; position: fixed; right:100; top: 10; width: 100%;">

    <div style="background: none repeat scroll 0 0 #80C5A9; display: block; height: 40%;
                position:fixed; bottom: 0;  overflow: hidden; width: 100%;">
   <h1>Welcome Naren</h1>
   <label>Its good for u.All the best</label> 
  </div>
 </div>

 </body>
</html>

Answer 1

这有用吗？

<html>
    <head></head>
    <script language="javascript"> 
       function toggle(el) {
           if ( el.id && el.style.display == 'block' ) {
              el.style.display = 'none';
           } else {
              el.style.display = 'block';
           }
       }

    function cancelToggle(id,e)

         {         var target = (e && e.target) || (event && event.srcElement);
           var obj = document.getElementById('toggleText');
           if(target!=obj){obj.style.display='none'}
         }

    function stop() {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            window.event.cancelBubble = true;
        }
    }
    </script>
    <body>

    <a id="displayText" href="javascript:toggle(document.getElementById('toggleText'));">show</a>

    <div onClick='toggle(this)' id="toggleText" style="display: none; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);  
               bottom: 0; height: 100%; left: 0; overflow: hidden; position: fixed; right:100; top: 10; width: 100%;">

       <div onClick='stop()' style="background: none repeat scroll 0 0 #80C5A9; display: block; height: 40%; position:fixed; bottom: 0;  overflow: hidden; width: 100%;">
      <h1>Welcome Naren</h1>
      <label>Its good for u.All the best</label> 
     </div>
    </div>

    </body>
</html>

另一个选项是检查event.target并查看点击是否来自内部div。

单击div时需要关闭div，但单击内部div时不应关闭div

1 个答案: