js实现的点击div区域外隐藏div区域
首先看下JS的事件模型，JS事件模型为向上冒泡，如onclick事件在某一DOM元素被触发后，事件将跟随节点向上传播，直到有click事件绑定在某一父节点上，如果没有将直至文档的根。
阻止冒泡：1、对于非IE浏览器：stopPropagation()。2、对于IE浏览器：cancelBubble属性为true
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} .wraper {
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
} .menu_zone {
width: 50%;
height: 50px;
background: #aaa;
} .model_zone {
position: absolute;
width: 50%;
height: 200px;
background: #cac;
display: none;
}
</style>
</head> <body>
<div class="wraper">
<div id="menu" class="menu_zone">点击我显示菜单</div>
<div id="model" class="model_zone">我是菜单</div>
</div>
<script>
function $(id) {
return document.getElementById(id)
}
var oMenu = $("menu"),
oModel = $("model");
document.onclick = function () {
oModel.style.display = "none";
} // 方法一：使用dom0方式
// oMenu.onclick = function(e){
// stopFunc(e);
// oModel.style.display = "block";
// }
// oModel.onclick = function(e){
// stopFunc(e);
// } //方法二：使用dom2方式
oMenu.addEventListener('click', function (e) {
stopFunc(e);
oModel.style.display = "block";
}, false)
oModel.addEventListener('click', function (e) {
stopFunc(e);
}, false) //阻止事件向上传递
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
</script>
</body> </html>
效果如下：
js实现的点击div区域外隐藏div区域的更多相关文章
- 点击区域外隐藏该区域，event.stopPropagation()
event.stopPropagation() Description: Prevents the event from bubbling up the DOM tree, preventing an ...
- js实现的点击div区域外隐藏div区域(转)
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡: 1. ...
- jQuery实现鼠标点击Div区域外隐藏Div
冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络 ...
- js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
- JS 实现点击页面任意位置隐藏div、span
通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存 ...
- 怎么用js或jq点击展开，出现隐藏的DIV,点击收起DIV又隐藏起来.
方法一:1 <script type="text/javascript"> $(function() { $("#toggle").click(fu ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- FormSheet式模态视图，点击模态视图外隐藏模态视图的方法
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
随机推荐
- Codeforces Round #299 (Div. 2)D. Tavas and Malekas
KMP,先预处理按每个节点标记,扫一遍更新每个匹配位置,最后kmp判断是否有重合而且不相同的地方 注意处理细节,很容易runtime error #include<map> #includ ...
- CC 攻击检测研究现状
网络层ddos 是让去往银行的道路交通变得拥堵,无法使正真要去银行的人到达:常利用协议为网络层的,如tcp(利用三次握手的响应等待及电脑tcp 连接数限制)等应用层ddos 则是在到达银行后通过增办. ...
- 32-THREE.JS 球体
<!DOCTYPE html> <html> <head> <title>Example 05.05 - Basic 3D geometries - S ...
- Git和SVN之间的区别
如果你在读这篇文章,说明你跟大多数开发者一样对GIT感兴趣,如果你还没有机会来试一试GIT,我想现在你就要了解它了. GIT不仅仅是个版本控制系统,它也是个内容管理系统(CMS),工作管理系统等.如果 ...
- Agilent RF fundamentals （10) Mixer ,Phase domain and modulator
1 Mixer characterization DC input Bias voltage Bias Current RF input Lo input IF output 2 mixer devi ...
- Could not publish to the server.Please assign JRE to the server
1.错误描述 2.错误原因 由错误提示可知,是Tomcat未绑定JRE,导致报错 3.解决办法 (1)删除新建Tomcat (2)重新新建一个Tomcat,配置好Tomcat路径和JRE路径
- 转: Photon 3.4 Changed Logs ..
最新版了.修了很多bug. Photon 3.4 http://doc.exitgames.com/en/onpremise/current/reference/version-history/pho ...
- 旧书重温：0day2【6】bind_shell
学习了以上5节课,我们学到了很多知识,例如如何动态获取指定函数的地址:我们也学到了很多经验,例如如何发现代码中的错误,如何用od定位到错误,并修正. 有了以上积累,今天我们继续实验bind_shell ...
- MySQL install and setting
Tomorrow is the deadline of DATABASE, I am very nervous because of my project. Today is first day th ...
- Android的长度单位及屏幕分辨率
屏幕分辨率基础 1.术语和概念 术语 说明 备注 Screen size(屏幕尺寸) 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 摩托罗拉milestone手机 ...