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

【问题标题】：Need to close a div when it is click on it but should not close when inner div is clicked单击时需要关闭 div，但单击内部 div 时不应关闭
【发布时间】：2011-06-13 19:51:20
【问题描述】：

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

我有一个文本'show' onclick on show 它打开了一个设置为 display=none 的 div 并且这个 div 设置为overflow=hidden。在 div 里面我有另一个 div 与物质。这工作正常，但问题是设置为 display=none 的主 div 的 onclick 在其区域中单击时必须关闭。

代码：

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

【问题讨论】：

标签： javascript

【解决方案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。

【讨论】：

HTML 示例不适用于使用 window.event.cancelBubble 的 IE
我是java脚本新手，你能粘贴完整的工作代码吗？
我收到一个错误，firefox 事件未定义，但在其他浏览器中工作正常。
函数停止(e) { if (!e) { window.event.cancelBubble = true; } 其他 { e.stopPropagation(); } } 现在它可以工作了