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 相关文章推荐
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
webpack的pitching loader详解
Sep 23 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&amp;MYSQL分页原理及实现
2007/01/02 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python装饰器常见使用方法分析
2019/06/26 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python读取表格类型文件代码实例
2020/02/17 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
实习自我鉴定
2013/12/15 职场文书
事业单位请假制度
2014/01/13 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
高中军训感言200字
2014/02/23 职场文书
思想品德评语大全
2014/12/31 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server