这篇文章主要分享一个Javascript点击其他任意地方隐藏关闭DIV实例,需要的朋友可以参考下。

代码如下,实现了点击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 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代码风格指南》,也希望大家多多支持爱安网。

最新资讯
赴美上市第4个交易日 瑞幸咖啡股价破发

赴美上市第4个交易日

开盘价即为发行价17美元,随后一度下跌至15.20美元,截至
停售、收缩业务 智能存款被叫停?

停售、收缩业务 智能

所谓“创新存款产品”,业内一般俗称“智慧存款”或“智
小鹏汽车瞄上出行市场 欲打翻身仗?

小鹏汽车瞄上出行市场

小鹏汽车并不是个例,无论是造车新势力方还是传统车企,都
华中科技大学与华为达成合作 将共同探索前沿科学

华中科技大学与华为达

华中科技大学宣布与华为技术有限公司签署战略合作协议
京东拼购事业部换帅 副总裁韩瑞接替侯艳平

京东拼购事业部换帅

拼购事业部是京东此前组织架构调整后的新产物。
两部门明确集成电路设计企业和软件企业税收优惠政策

两部门明确集成电路设

为支持集成电路设计和软件产业发展,财政部、国家税务总
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编