编程 Javascript

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代码风格指南》，也希望大家多多支持三水点靠木。

- Author -

沫鱼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js取得url地址参数实例

Feb 22 Javascript

js获取url中的参数且参数为中文时通过js解码

Mar 19 Javascript

javascript实现简单的贪吃蛇游戏

Mar 31 Javascript

PHP+mysql+Highcharts生成饼状图

May 04 Javascript

跟我学习javascript的执行上下文

Nov 18 Javascript

jquery.cookie实现的客户端购物车操作实例

Dec 24 Javascript

基于JQuery打造无缝滚动新闻步骤详解

Mar 31 Javascript

JavaScript实现九九乘法表的简单实例

Jun 07 Javascript

python爬取安居客二手房网站数据(实例讲解)

Oct 19 Javascript

Angular实现较为复杂的表格过滤，删除功能示例

Dec 23 Javascript

vue微信分享到朋友圈 vue微信发送给好友

Nov 28 Javascript

Jquery异步上传文件代码实例

Nov 13 jQuery

第五篇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