Javascript点击其他任意地方隐藏关闭DIV实例


Posted in Javascript onJune 21, 2016

代码如下,实现了点击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 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>
</html>

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

Javascript 相关文章推荐
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
第五篇Bootstrap 排版
Jun 21 #Javascript
Javascript随机标签云代码实例
Jun 21 #Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 #Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 #Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 #Javascript
第三篇Bootstrap网格基础
Jun 21 #Javascript
Bootstrap三种表单布局的使用方法
Jun 21 #Javascript
You might like
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
Python的SQLAlchemy框架使用入门
2015/04/29 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
Python 类的继承实例详解
2017/03/25 Python
Python多继承顺序实例分析
2018/05/26 Python
对python中的argv和argc使用详解
2018/12/15 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
元宵节主持词
2014/03/25 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL