Javascript点击其他任意地方隐藏关闭DIV实例

xchrist 2016-06-21

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

xchrist

xchrist

相关推荐

利用Js/Jquery实现div的隐藏与显示(注意释放与不释放空间)

jQuery隐藏和显示div的方式：1、$.attr;//隐藏div. 方法1 和 方法2 中的 display:none 可以换成 visibility:hidden，display:block可以换成 visibility:visible .两者的区别

89510194 / 0评论 2019-12-31

html - jquery操作div的显示

在html页面，显示的内容太多，会影响用户体验，如果有一些，点击才出现的内容，就可以减少内容的干扰。使用jquery就可以很快的实现。

开心就好 / 0评论 2019-08-27

css li 超出隐藏代码

下面就是方法的演示。不过请注意此方法适用与IE与OP浏览器！设置li超出部分显示省略号的方法

ShixunOnline / 0评论 2008-12-03

纯css，div隐藏滚动条，保留鼠标滚动效果。[转载]

前记当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。方法这里介绍一个简单的方法。大体思路是在div外面再

xiaohuli / 0评论 2019-06-29

纯css，div隐藏滚动条，保留鼠标滚动效果。

.nav_wrap{height:400px;width:200px;overflow:hidden;border:1pxsolid#ccc;margin:20pxauto;}.nav_ul{height:100%;width:220px;overflow

libowen0 / 0评论 2018-06-04

css控制图片不改变原比例居中显示，图片超出div部分隐藏

<!DOCTYPEhtml>. display:flex;flex-direction:row;width:200px;height:200px;overflow:hidden;display:flex;justify-content:cent

hhhkhhh / 0评论 2017-07-20

HTML中DIV提示框的实现

HTML中DIV提示框的实现点击网页中某个按钮时，会弹出一个对话框，自定义提示框的样式和内容。

aperson / 0评论 2016-06-29

关于设置div隐藏的小案例

//$.prop //无效，暂时不知怎么解决。</script>其中比较完全可行的是前三种方式；而通过attr设置style属性时，将会丢失原有的样式，因此不大好用，而通过prop方式设置style则返回的东西视乎不是我们想要的，暂时舍弃，推荐

杉林的HelloWord / 0评论 2015-11-24

js搜索显示搜索结果div，点击除了搜索框和搜索结果div时，隐藏

<div class="seaVal"><input id="subjectName" name="subjectName" type="text" onke

83510998 / 0评论 2015-08-18

CSS样式overflow-y属性的使用

今天项目需求，在自定义ExtJS拖拽控件的时候，拖拽容器主体定义成div标签，当拖拽元素宽度超过div标签宽度，拖拽元素会移出拖拽容器，因此需要设置滚动条，经过实践可以直接为div增加overflow-y样式，设置style属性为overflow-y:au

dangzhangjing / 0评论 2019-06-27

CSS样式overflow-y属性的使用

今天项目需求，在自定义ExtJS拖拽控件的时候，拖拽容器主体定义成div标签，当拖拽元素宽度超过div标签宽度，拖拽元素会移出拖拽容器，因此需要设置滚动条，经过实践可以直接为div增加overflow-y样式，设置style属性为overflow-y:au

语帆 / 0评论 2015-04-15

jquery-控制div的显示与隐藏

$.show()表示display:block,$.hide()表示display:none;$.toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

小肖 / 0评论 2014-07-16

div设置显示与隐藏、边框等

visibility隐藏的对象还保留对象显示时所占的物理空间，display则不保留。inline-block对象显示为内嵌元素，但所有子对象都显示为块元素，相邻的内嵌元素将显示在同一行，允许空格。table-header-group将元素作为表格标题组显

teresalxm / 0评论 2014-04-30

div设置显示与隐藏、边框等

visibility隐藏的对象还保留对象显示时所占的物理空间，display则不保留。inline-block对象显示为内嵌元素，但所有子对象都显示为块元素，相邻的内嵌元素将显示在同一行，允许空格。table-header-group将元素作为表格标题组显

CoderChang / 0评论 2014-04-30

css控制div显示／隐藏方法

display:none——隐藏该html元素，在浏览器中消除该元素，不占屏幕的空间。visibility:hidden——隐藏该元素，正真的隐藏，但他还占有那块空间。visibility:visible——显示元素。

hjfbluesky / 0评论 2014-03-05

jQuery 弹出 div层

<!

84483368 / 0评论 2013-11-22

点击页面其它地方隐藏div所想到的jQuery的delegate

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作，而点击页面其它地方隐藏该div。比如很多导航菜单，当菜单展开的时候，就会要求点击页面其它非菜单地方，隐藏该菜单。DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶

83443560 / 0评论 2013-09-06

div构建table

用该值为对象之后添加新行none :隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline :内联对象的默认值。用该值将从对象中删除行compact :分配对象为块对象或基于内容之上的内联对象marker :

统一开发环境UDE / 0评论 2013-02-05

JQuery显示和影藏DIV

//varhelloDivObj=$.toggle();//甚至只需要这一句搞定切换隐藏与显示。<divclass="title_b">(一)、jQuery用法!将一个或多个DOM元素转化为jQuery对象。这个函数也可以接

JeWangZhe / 0评论 2012-08-30

js 与 jQuery 控制div显示与隐藏，给div赋内容 的简单测试。和css的简单写法

<!

切慕溪水 / 0评论 2012-05-01

css中实现div的显示和隐藏

display属性设置元素的显示方式，对应脚本特性为display，可选值为none、block和inline，各值的说明如下：。inline-block对象显示为内嵌元素，但所有子对象都显示为块元素，相邻的内嵌元素将显示在同一行，允许空格。list-it

CoderChang / 0评论 2012-07-29

jQuery基于闭包实现的显示与隐藏div功能示例

本文实例讲述了jQuery基于闭包实现的显示与隐藏div功能。分享给大家供大家参考，具体如下：。<p>当前手机号码：<span id="oldPhone">$!{user.phone}</span>&

Chriswang / 0评论 2018-06-09

jQuery除指定区域外点击任何地方隐藏DIV功能

var target = $(e.target);// !target.is('#btn *') && !target.is('#overlay *'). if(!target.is('#btn') && !target.i

csdnliuy / 0评论 2017-11-13

JS获取一个未知DIV高度的方法

本文实例讲述了JS获取一个未知DIV高度的方法。分享给大家供大家参考，具体如下：。下面是Prototype提供的方法，能够兼容各种浏览器，同时在元素隐藏的情况下也能正确得到元素尺寸，供参考：。// All *Width and *Height proper

PeterLuoz / 0评论 2016-08-09

jQuery实现获取隐藏div高度的方法示例

本文实例讲述了jQuery实现获取隐藏div高度的方法。分享给大家供大家参考，具体如下：。$){//如果本地没有jquery则加载百度cdn的jquery. 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuer

suis / 0评论 2017-02-09

jquery 判断div show的状态实例

实例如下：。var. temp= $("#test").is(":hidden");//是否隐藏。var. temp1= $("#test").is(":visible");/

85403969 / 0评论 2019-04-29

JQuery实现DIV其他动画效果的简单实例

<!<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. width:200px;height:200px;b

代码之美 / 0评论 2019-04-26

JQuery DIV 动态隐藏和显示的方法

-- 直接使用按钮的id没有问题。-- 绑定事件似乎要写在被绑定对象的后面 -->

scjcjlu / 0评论 2016-06-23

jQuery基于toggle实现click触发DIV的显示与隐藏问题分析

本文实例讲述了jQuery基于toggle实现click触发DIV的显示与隐藏。分享给大家供大家参考，具体如下：。<input type="button" id="btn" title="Click

Web全栈笔记 / 0评论 2016-06-12

js不能获取隐藏的div的宽度只能先显示后获取

chengxiaofeng / 0评论 2019-04-24

jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法。分享给大家供大家参考，具体如下：。为了更好的用户体验，在做下拉获取其他有弹出层的时候，当展开下拉时，要做到点击其他区域也能自动隐藏收起下拉和遮罩层，这样的效果用一段js就可以了。})

前端档案 / 0评论 2015-12-23

JQuery显示、隐藏div的几种方法简明总结

//$.show();//第3种方法1.给元素换class，来实现隐藏div，前提是换的class样式定义好了隐藏属性代码如下：。$.hide();//隐藏div在程序设计中经常用到div的显示和隐藏，下面总结几种方法：。<div id='demo'

nnj / 0评论 2019-04-20

JQuery显示隐藏DIV的方法及代码实例

-- 直接使用按钮的id没有问题

83457500 / 0评论 2019-04-20

JQuery控制div外点击隐藏而div内点击不会隐藏的方法

本文实例讲述了JQuery控制div外点击隐藏而div内点击不会隐藏的方法。分享给大家供大家参考。比如有个div其id为body，实现在div外点击隐藏，div内点击不隐藏，采用jQuery实现如下：。$.trigger;希望本文所述对大家的jQuery程

草莓酱 / 0评论 2019-04-19

jquery和js实现对div的隐藏和显示方法

jQuery对div的显示和隐藏：。$.show()隐藏：代码如下：。div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白

87407607 / 0评论 2019-04-18

jQuery随便控制任意div隐藏的方法

<!DOCTYPE html>. div { background:#ece023; width:30px;$(this).hide(1000);});

eboyhaining / 0评论 2013-06-28

jQuery显示和隐藏div特效demo

$.ready;function hiden(){$.hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide以2000毫秒的速度隐藏,还可以带slow,fast}. function slideToggle(){$.s

jquery教程 / 0评论 2013-03-23

JQuery实现点击div以外的位置隐藏该div窗口

class="bigPic"的div是被显示或隐藏的div，另外.case > ul > li是class="bigPic"的父级元素

草莓酱 / 0评论 2013-09-13

由点击页面其它地方隐藏div所想到的jQuery的delegate

</div>对于这个问题一般有两种思路，这两种思路都会利用事件冒泡这一原理，想要详细了解Javascript事件机制可以看看JavaScript与HTML交互――事件,这不是本文重点，所以这里只是简单介绍一下事件冒泡，DOM事件流：DOM2级事

xiongfeng / 0评论 2013-08-29

基于jquery实现的定时显示与隐藏div广告的实现代码

在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了，但要定时我们需要利用setTimeout函数来实例，下面我给大家分享我的方法。html页面中我们随便放些东西。<div class="toolbarframe&

83457500 / 0评论 2013-08-22

分享用纯CSS实现三列DIV等高布局的方法

DIV等高布局，我想很多人都遇见过，我也看过不少的方法，有的是通过背景图片，实现假象的等高效果；还有的用js实现等等。这些都是方法，但是现在都不用以上的方法，来个真正的纯css实现等高！现在我们来看看真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容

erix / 0评论 2011-06-03

CSS DIV中Visibility和Display属性用法区别

你知道CSSDIV中Visibility和Display属性有什么区别吗，这里和大家分享一下，Visibility属性共有四个可用的值，但常用的值是visible和hidden，而Display属性的可用值有很多，但在这里我们只关注其中的几个值：block

grtreexyz / 0评论 2010-09-14

实例解析DIV Scroll属性用法

DIV Scroll属性详解，为DIV层打造不同的滚动条。以上属性设置的值为visible(默认值)、scroll、hidden(隐藏)、auto()浏览器自动设置)。或<bodystylebodystyle="overflow:hidde

wangxiuyan0 / 0评论 2010-09-09

纯CSS实现三列DIV等高布局方法揭秘

DIV等高布局，我想很多人都遇见过，我也看过不少的方法，有的是通过背景图片，实现假象的等高效果；还有的用js实现等等。这些都是方法，但是现在都不用以上的方法，来个真正的纯css实现等高！现在我们来看看真正的CSS实现的等高布局，其方法主要是采用“隐藏容器溢

houzimanjjt / 0评论 2010-09-06

CSS布局中DIV为空时在IE6下的不同表现

} 以上代码在多数浏览器中都可正确显示，但我们在实际运用中，确不象理论上这么简单，特别的IE6中并非如你所想，好象有时可以定义高度，有时它就不知何原因失效了！

cuteyDan / 0评论 2010-09-02

Firefox嵌套CSS中div标签居中问题解决方法

如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在Firefox中b却会是居左的。解决办法就是设置b的横向margin为auto。最好的解决方案往往是最简单的，这里列出8个C

Ladyseven / 0评论 2010-08-31

DIV CSS隐藏内容样式方法详解

<DIVstyle="display:none;">你是看不见我的</DIV>使用DIV中CSS样式display:none;将使得DIV内的内容隐藏通过浏览器什么也看不见，并且隐藏的内容也不会占用空间。通过此方

MoeRookie / 0评论 2010-08-24

DIV CSS隐藏内容样式方法揭秘

使用div中CSS样式display:none;将使得div内的内容隐藏通过浏览器什么也看不见，并且隐藏的内容也不会占用空间。使用CSS样式通过对“你是看不见我的”DIV CSS层设置固定的高和宽，然后通过overflow:hidden样式即可使得超出固定

erix / 0评论 2010-08-23

用Div仿showModalDialog模式菜单的效果的代码

今天研究了下用javascript结合DIV来制作当前窗体显示模式窗体,并使子窗体不能操作的一个小例子!</div> </div> 第四步:编写相关javascript脚本: <SCRIPTLANGUAGE="Jav

黄玮鹏 / 0评论 2007-03-04