编程 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 相关文章推荐

javascript 操作Word和Excel的实现代码

Oct 26 Javascript

jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

Jun 06 Javascript

实例讲解JQuery中this和$(this)区别

Dec 08 Javascript

node.js中的fs.lchmodSync方法使用说明

Dec 16 Javascript

深入理解JavaScript系列（47）：对象创建模式（上篇）

Mar 04 Javascript

JQuery中上下文选择器实现方法

May 18 Javascript

JS+CSS实现简易的滑动门效果代码

Sep 24 Javascript

Javascript iframe交互并兼容各种浏览器的解决方法

Jul 12 Javascript

js创建数组的简单方法

Jul 27 Javascript

Vue.js原理分析之observer模块详解

Feb 17 Javascript

SVG实现时钟效果

Jul 17 Javascript

JS重学系列之聊聊new操作符

Mar 04 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