这篇文章主要分享一个Javascript点击其他任意地方隐藏关闭DIV实例,需要的朋友可以参考下。

代码如下,实现了点击input显示一个div层,当点击除input和div以外的地方的时候,隐藏div的功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>点击其它地方关闭DIV</title>
</head>

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

以上就是本文的全部内容,了解更多JavaScript的语法,大家可以查看:《JavaScript 参考教程》、《JavaScript代码风格指南》,也希望大家多多支持爱安网。

最新资讯
美航天局计划发射新探测器探索宇宙起源

美航天局计划发射新探

美国航天局日前宣布,计划2023年发射一个新探测器,以绘制
收集个人信息未放款 用户诉百度"有钱花"侵犯隐私权

收集个人信息未放款

因认为百度“有钱花”收集了其个人信息却未提供借款服
滴滴不慌:烧钱一时爽,挣钱火葬场?

滴滴不慌:烧钱一时爽,挣

如此海量的数据,巨大的流量和消费场景,滴滴不布局金融业
教育部:到2022年全面普及实名制网络学习

教育部:到2022年全面普

教育部发布《关于加强网络学习空间建设与应用的指导意
冲鸭!三艘满载特斯拉Model 3的货轮正向中国疾驰

冲鸭!三艘满载特斯拉Mo

眼下,特斯拉的廉价版电动汽车Model 3还未正式进入中国
逾期未启用QR停车 ofo被新加坡暂吊销执照

逾期未启用QR停车 ofo

报道称,ofo必须在下个月13日之前移除所有脚踏车,否则陆
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图