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来实现动画导航效果的代码
Dec 16 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
Vue根据条件添加click事件的方式
Nov 09 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连接mssql数据库的几种方法
2013/02/21 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
简单的js计算器实现
2016/10/26 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python进程间通信用法实例
2015/06/04 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python3 pygame实现接小球游戏
2019/05/14 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
django ORM之values和annotate使用详解
2020/05/19 Python
python 基于wx实现音乐播放
2020/11/24 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
双创工作实施方案
2014/03/26 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫