zoukankan html css js c++ java

JS 点击显示点击任意处隐藏事件

<body>
<input type="text" value="" id="tf"/>
<div style="400px; height:200px;border:1px solid #000;display:none" id="con">
 <p>1111</p>
 <p><span>2222</span></p>
 <p><a href="#">3333</a></p>
</div>
<script>
  function e(obj){return document.getElementById(obj)}
  e('tf').onclick=function(event){
    e('con').style.display='block';
    stopBubble(event); 
    document.onclick=function(){
      e('con').style.display='none';
　　　　　　　document.onclick=null;　
    }
  }
   
  e('con').onclick=function(event){
    //只阻止了向上冒泡，而没有阻止向下捕获，所以点击con的内部对象时，仍然可以执行这个函数
    stopBubble(event); 
  }
  //阻止冒泡函数
  function stopBubble(e){  
    if(e && e.stopPropagation){
      e.stopPropagation();  //w3c
    }else{
      window.event.cancelBubble=true; //IE
    }
  }
</script>
</body>

查看全文

相关阅读:
下载视频
 009 逻辑 + MFC CString
008 浅拷贝与深拷贝
 007 operator
006 this指针原理
 005 逻辑 + STL list
004 list::sort
003 逻辑 + mfc CList
001 C++历史和思想
 并查集模板

原文地址：https://www.cnblogs.com/The-second/p/6408225.html

JS 点击显示 点击任意处隐藏事件

JS 点击显示点击任意处隐藏事件