<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. Memcache未授权访问漏洞

    Memcached 分布式缓存系统,默认的 11211 端口不需要密码即可访问,黑客直接访问即可获取数据库中所有信息,造成严重的信息泄露. 0X00 Memcache安装 1. 下载Mencache的 ...

  2. iOS开发--提交应用Your binary is not optimized for iPhone 5

    ERROR ITMS-: "Your binary is not optimized for iPhone 5 - New iPhone apps and app updates submi ...

  3. It is possible that this issue is resolved by uninstalling an existing version of the apk if it is present, and then re-installing ___Error Installing APK

    一 : 根据以下路径,找到Instant Run中的选项         File —— Settings——Build,Execution,Deployment——Instant Run       ...

  4. 如何让移植的嵌入式ARM显示中文汉字

    如果你急于在ARM开发板上看到Qt显示中文,而不介意稍次的效果,可以在运行Qt程序时,增加设置字体的参数,比如运行名为hello的Qt程序:./hello -fn unifont 1.首先,需要文泉驿 ...

  5. 深入浅出MFC——消息映射与命令传递（六）

    1. 消息分类: 2. 万流归宗——Command Target(CCmdTarget): 3. "消息映射"是MFC内建的一个信息分派机制.通过三个宏(DECLARE_MESSA ...

  6. 配置React Native环境及解决运行异常

    一. 安装Homebrew: Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki. brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默 ...

  7. JS 数组Array常用方法

    参考网站: http://www.jb51.net/article/60502.htm,作者:junjie 今天在使用js切割字符串"浙江,江苏 , 天津,"...这样字符串的时候 ...

  8. ViewBag对象的更改

    JSSDKObj = new JSSDKModel(); JSSDKObj.title = "初始名称"; ViewBag.JSSDK = JSSDKObj;//初始设置ViewB ...

  9. 【大数据系列】win10不借助Cygwin安装hadoop2.8

    一.下载安装包 解压安装包并创建data,name,tmp文件夹 二.修改配置文件 1.core-site.xml <?xml version="1.0" encoding= ...

  10. Elasticsearch学习之嵌套聚合，下钻分析，聚合分析

    1. 计算每个tag下的商品数量 GET /ecommerce/product/_search { "aggs": { "group_by_tags": { & ...