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

Posted 2020-08-31 小学员G

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 点击显示点击任意处隐藏事件相关的知识，希望对你有一定的参考价值。

<body>
<input type="text" value="" id="tf"/>
<div style="width: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>

以上是关于JS 点击显示点击任意处隐藏事件的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS中怎样实现点击页面的任意地方隐藏指定div

js隐藏div

点击同一处显示与隐藏

js实现点击按钮显示某个区域然后点击页面中任意其他位置，隐藏该区域

点击除元素以外的任意地方隐藏元素js

php 设置按钮被点击后自动隐藏

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

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