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 类方法定义还是有点区别
Apr 15 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
小程序云开发实战小结
Oct 25 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对象类型判断
2008/08/27 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
xml转json的js代码
2012/08/28 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
JS实现百度搜索框
2021/02/25 Javascript
Django Highcharts制作图表
2016/08/27 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
python实现ftp文件传输功能
2020/03/20 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
公司中秋节活动方案
2014/02/12 职场文书
小学清明节活动方案
2014/03/08 职场文书
运动会口号大全
2014/06/07 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
你知道Java Spring的两种事务吗
2022/03/16 Java/Android