<body style="text-align:center;">
　　<input type="text" style="width:200px;height:30px;background:pink;margin-top:100px auto 0;">
　　<div style="width:300px;height:300px;background:red;margin:0 auto;display:none;"></div>
<script>
var input=document.getElementsByTagName('input')[0];
var div=document.getElementsByTagName('div')[0];
//第一种写法
input.addEventListener('click',function(event){
　　 event=event||window.event;
　　 div.style.display="block";
　　event.stopPropagation();
})
 document.addEventListener('click',function(event){
 　　event=event||window.event;
　　 div.style.display="none";
　　event.stopPropagation();
})
 div.addEventListener('click',function(event){
　　event=event||window.event;
　　div.style.display="block";
　　event.stopPropagation();
 })

第二种写法

document.onclick=function(event){
　　event=event||window.event;
　　div.style.display="none";
　　event.stopPropagation();
}
input.onclick=function(event){
　　event=event||window.event;
　　div.style.display="block";
　　event.stopPropagation();
}
div.onclick=function(event){
　　event=event||window.event;
　　div.style.display="block";
　　event.stopPropagation();
}
//阻止冒泡的兼容写法
function stopEvent(event){
　　var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容
　　if(window.event){ //这是IE浏览器
　　　　e.cancelBubble=true;//阻止冒泡事件
　　　　e.returnValue=false;//阻止默认事件
　　}else if(e && e.stopPropagation){ //这是其他浏览器
　　　　e.stopPropagation();//阻止冒泡事件
　　　　e.preventDefault();//阻止默认事件
　　}
}
</script>
</body>

js实现点击div以外区域，隐藏div区域的更多相关文章

  1. JS 实现点击页面任意位置隐藏div、span

    通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...

  2. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  3. JQ 点击指定文本框显示div。点击其他区域隐藏DIV

    <input id="username" type="text" style="width:90%;margin-top: 40px;" ...

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

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

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

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

  6. Js-Html 前端系列--点击非Div区域隐藏Div

    最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择, ...

  7. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  8. 点击页面任何位置隐藏div

    <include file="Public:header" /> <style type="text/css"> table{width ...

  9. IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时，ios无法正常唤起输入法键盘

    原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...

  10. jquery点击按钮显示和隐藏DIv

    function changeDisplay() { if ($("#btnShow").attr("value")== "添加附件") { ...

随机推荐

  1. ARM+LINUX嵌入式系统的终端显示中文乱码解决

    前一段时间解决的一个问题,看起来是个小问题,实际解决这个问题却花了一个星期的晚上休息时间,记录分享一下. 问题描述: linux内核配置中NLS(native language support)已经选 ...

  2. DOM的学习

    今天学习了DOM,感觉学习起来真的没那么简单啦,这不是一个好现象啊,只有依靠自己大补课,嘿嘿,具体的总结了一下,今天学习的其实并不多,仅仅学习了不同的节点类型,但是知识还是蛮碎的,要一点一点的总结,昨 ...

  3. WebService连接postgresql（ 失败尝试）

     一.先进行postgresql的配置 1. 安装ODBC驱动 下载地址:http://www.postgresql.org/ftp/odbc/versions/msi/ 2. 打开 控制面板 -&g ...

  4. 【转载】经典.net面试题目【为了笔试。。。。。】

    . 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以访问. protected : 保护成员 ...

  5. JWNL的配置使用

    JWNL是什么? JWNL is an API for accessing WordNet-style relational dictionaries. It also provides functi ...

  6. Eclipse安装php插件phpeclipse(转)

    1.PHPEclipse是Eclipse的一个用于开发PHP的插件.官网下载地址:http://sourceforge.net/projects/phpeclipse/下载解压后,将features和 ...

  7. java基础---->java的新特性（一）

    通过简单的实例来感觉一下java7和java8的新特性.当那条唯捷径省略了朝拜者,我便在一滴花露中瞬间彻悟. java7代码实例 一.java7中switch中可以字符串 @Test public v ...

  8. JVM垃圾收集器组合--各种组合对应的虚拟机参数实践

    前言 相信很多人都看过下面这张图,(来自<深入理解Java虚拟机:JVM高级特性与最佳实践>) 在学完几种垃圾收集器类型及组合后,打算看看实际中程序用到的垃圾收集器. 但是在jconsol ...

  9. 去掉VS2010代码中文注释的红色下划线

    VS2010代码中文注释出现红色下划线,代码看上去很不美观,发现是由于安装Visual Assist X插件造成的. 解决办法:打开VAX的Options对话框,取消Advanced --> U ...

  10. 公钥基础设施体系和EJBCA的一些概念

    最近一段时间的在公司做的事情是: 1. 为公司的一些线上系统启用https(使用nginx反向代理的方式来实现,之前的应用无需做改动) 2.为符合规则的用户颁发数字证书(自建CA来实现,目前的用途是给 ...